useEffect 알아보기

useEffect

useEffect가 필요한 이유

• top level에서 API 호출 → useState 업데이트 → 리랜더링 → 함수 자체 다시 호출 → API 호출 → useState → 반복 (useState에 의한 리랜더링은 값이 아닌, 메모리 비교로 리랜더링을 진행하기 때문) → 무한반복 -> useEffect를 사용하길 권장

 

 useEffect

• useState → render → commit → paint(화면에 나타나고) → useEffect 가 실행됨. (랜더 이후 시작되기 때문에 작동하는게 늦다는 단점이 있음)
• 그래서 [useEffect A → useEffect B → useEffect C] 의 폭포수 코드를 쓰면→ 3번의 리랜더링 → 성능 저하 → useState으로 해결 할 수 있다면, useEffect를 쓰지말자.
• 코드 상 useEffect 와 functionA가 있다면, 동기적인 A부터 실행, useEffect끼리는 순서대로 진행
• cleanUp function : 리랜더링 전, 언마운트 전에 호출됨 (맨 처음엔 호출 안함)

• 개발자 모드 엄격모드에서는 useEffect가 마운트, 언마운트까지 한 번씩 총 두번 발생 → 버그 찾기 위함
  • 두 번 발생 신경쓰지 말기 → cleanUp 함수에 집중 (unmount되면 clean up 호출 == dispose)
• useEffect 안에 함수를 사용하는 경우
  • 되도록이면 useEffect 안에 써서 종속성이 필요없도록 사용
  • 여러 군대 사용해서 UseEffect 밖에 함수가 있다면 useCallback을 쓰기 (메모리 최적화) 
• useState, useReducer로 처리할 수 있다면, useEffect를 남용하지 말자. 
• API호출은 useEffect보다는 React Query를 사용하자. 
• 종속성에 객체, 배열이 들어간다면 무한 로딩이 생길 가능성 높음 (매 새로운 참조 객체를 반환하므로)
• 최적화를 위해 useCallback, useMemo로 처리할 수 있지만 비용이 비싸므로, 다르게 처리하도록 노력하자.