useEffect 사용시 주의사항

useEffect 사용시 주의사항

• 의존성 배열 - [ X ] 내가 언제 이펙트를 다시 실행해야 할 지 지정할 때 쓰는 것

  → 의존성 배열은 이펙트에서 쓰이는 값 전부를 알려줘야 한다. 만약 원하는 동작이 이런 방식으로는 작동하지 않는다면 의존성을 적게 요구하도록 이펙트 자체를 다시 설계해봐야한다

  의존성을 제거하는 기술

  1. 단순한 state의 업데이트는 이전 값을 알 수 있는 함수형 업데이트를 사용한다
  2. 서로 연관된 state들이 있을 경우 useReducer를 사용한다 → 이펙트가 state를 읽을 필요가 없게된다

     reducer는 컴포넌트 내에서 state 업데이트의 표현과 어떻게 state가 업데이트 되어야 할 지의 구현을 분리한다

• 의존성을 속이지 않는다
  보통 컴포넌트 안의 함수를 이펙트 안에서 사용할 때 의존성을 속이기 쉬운 환경이 만들어진다.
  의존성을 속이기 쉬운 환경이란, 개발자가 함수의 구현을 변경하였을 때 이펙트의 의존성을 변경할 생각을 자연스럽게 하지 못하는 환경을 의미한다.

  의존성을 속이기 어려운 환경을 만드는 방법

  1. 컴포넌트 안의 함수가 컴포넌트 안의 데이터를 사용하지 않는다면 컴포넌트 밖으로 함수를 빼낸다

     반드시 빼낸다. 함수를 밖으로 빼냄으로써 함수는 컴포넌트의 데이터 흐름에서 자유로워지게 되며 컴포넌트 안에서 의존성에 대해 신경쓸 필요가 없게된다.

  2. 이펙트 안에서 쓰이는 함수는 이팩트 안으로 집어넣는다

     이펙트 자체가 함수를 관리하게 하면 함수 구현의 변경과 해당 이펙트의 의존성을 변경을 자연스럽게 함께 생각하게 된다.

  3. 함수가 컴포넌트 안의 데이터를 사용하며 여러 이펙트 안에서 함수를 공유해야 할 겨우 useCallback을 사용한다.

     함수를 사용하는 이펙트의 의존성에 함수를 추가하는 것을 피하지 않는 대신 함수 자체를 useCallback의 의존성에 따라서 함수의 불변성을 유지시킨다.