Hook의 useEffect

클래스형 컴포넌트를 사용할 때, React-Native의 생애주기를 통해 props 또는 state를 관리할 수 있었다.
예를 들면 componentDidMount, componentDidUpdate 같은 것들이다.

React-Native를 익히거나 예제 프로젝트를 진행할 때는 굳이 사용하지 않아도 되겠지만
생애주기를 이용하게 될 때 쯤에는 보다 탄탄한 프로그램을 만들 수 있었을 것이다.

그럼 이제 함수형 컴포넌트에서는 위와같은 기능을 어떻게 구현할 수 있을까!
바로 useEffect 라는 Hook으로 구현이 가능하다.

특징에 대해 간단하게 설명을 하자면,

1. useEffect는 컴포넌트의 렌더링 이후에 다양한 side effects를 표현하는 것이다.

2. 클래스형 컴포넌트의 생애주기와는 달리 브라우저가 화면을 업데이트하는 것을 차단하지 않아서 애플리케이션의 반응성을 향상시켜준다.

3. 같은 성격의 API or Method를 묶어서 관리할 수 있다. 클래스형 컴포넌트의 경우 componentDidMount안에 성격이 다른 것들이 모일 수 있는데, useEffect는 여러번 사용이 가능하기에 같은 성격의 코드를 묶어 놓을 수 있게 된다.

// 클래스형 컴포넌트 일 때
componentDidMount(){
  getUserName();
  getUserPhone();
  colorUpdate();
}


// Hook을 이용했을 때
useEffect(()=>{
  getUserName();
  getUserPhone();
})

useEffect(()=>{
  colorUpdate();
})

4. Clean-up을 사용할 때, 함수를 반환한다. 따라서 구독의 추가와 제거를 위한 로직이 한 곳에서 관리될 수 있다.

useEffect(()=>{
  ChatAPI.subscribeToFriendStatus(friend.id, handleStatusChange);
  return () => {
    ChatAPI.unsubscribeFromFriendStatus(friend.id, handleStatusChange);
  };
})

---

그럼 useEffect는 언제 실행될까?

useEffect(()=>{
  ...code
}, [])

위 코드를 보면 마지막에 , []를 확인할 수 있고, 이를 이용해서 Effect를 관리할 수 있다.
위처럼 빈 배열을 넘긴다면 Effect는 처음 한번만 진행 될 것이다!

[] 안에 뭔가를 넣으면 어떻게 될지는 밑에서 설명합니다!

그럼 componentDidUpdate의 경우 useEffect에서는 어떤식으로 구현하게 될까?

useEffect(()=>{
  setUserNameIsChange(true)
}, [userName])

위에 예제 소스 처럼 대괄호 안에 state 값을 넣어주면, 해당 Effect는 state값이 변경할 때마다 동작하게 된다.
위와 같은 방식으로 componentDidUpdate 기능을 구현할 수 있고, componentDidUpdate와 다르게 특정 state값의 변경을 인식할 수 있어서 성능 개선에도 효과적일 것이다.

---

useEffect는 처음 사용할 때는 익숙하지 않을 수 있지만 사용하다보면 이전보다 확실히 코드가 깔끔해지는 것을 느낄 수 있을 것이다!

이상 끝!