[React hooks] useEffect

react의 Component Class 방식을 사용하다가 react hook을 알게 되니 신세계이다.

state의 변경사항을 구독하고, 해제하는 code가 예를 들면 componentDidMount, componentDidUpdate 등.. 으로 파편화 되어 있고, 확인해야하는 섬세함이 필요했고 이것이 자주 또는 가끔 버그를 유발하기도 했다.

useEffect

1. 렌더링 이후의 모든 업데이트 에서 수행된다.

리액트 effect가 수행되는 시점에 이미 DOM이 업데이트되었음을 보장한다.

2. unmount(clean-up)시에 실행할 작업은 function으로 리턴한다.

3. 원하는 value가 업데이트될 때만 실행하고 싶다면

clean-up이 때로는 성능저하를 일으키므로 두번째 parameter로 배열을 넘기면 배열의 값 중 하나라도 변경되면 업데이트된다.

배열의 요소 중 하나라도 업데이트되면 effect를 재실행한다. (!!!!)

4. mount시에만 실행하고 싶다면

두번째 parameter로 [] 빈배열을 보낸다.

5. unmount시에만 clean-up 함수를 싱행하고 싶다면

clean-up 함수를 리턴하고, 두번째 parameter로 [] 빈 배열을 보낸다.

6. 의존성 배열을 4, 5번과 같이 사용하면 안되는 이유

• 정답은 아니다

• 해결 방법

결론

ComponentDidUpdate에서 prevProps랑 비교하면서 바뀐 값을 watch하는 작업이 생각보다 귀찮고 readability에도 좋지 않다고 생각했는데 useEffect는 참 편리한 것 같다 (?)

React Hook useEffec document

React Hooks를 사용할때 반드시 알아야할 것들