https://react.dev/reference/react/useEffect
https://react.dev/reference/react/useInsertionEffect

팀원들과 공유한 이야기.

useEffect

• 외부 동기화 되는 코드가 아니라면 Effect를 제거할 수 있는 방법을 찾아보자. 간결화.
• 클린업 함수는 언마운트중 + 종속성이 변경되어 리렌더링 전에도 실행된다. 셋업 로직 없이 클린업 코드만 쓰는 걸 피해라.
• useEffect는 외부시스템(external system)과 컴포넌트를 연결해주는 훅이다.
• 첫번째 인자를 setup function 이라고 부르는 구나. 처음 알았다.
• 서버렌더링에서는 useEffect는 돌아가지 않는다.
• cleanup function은 unmount 외에도 dependencies가 변경되서 리렌더링 될 때마다호출된다
• 시각적인 작업에 대해 useLayoutEffect로 바꾸자.
• effects를 수동으로 작성해야 하는 경우가 많다면 customHook을 추출해야 하는 신호다~
• lint를 이용해 deps를 막는거보다 deps가 필요 없다는것을 증명 하자
• effect는 서버사이드 렌더링의 영향을 안끼침
• effect내의 Non-reactive 한 코드는 분리해서 사용

useLayoutEffect

• The purpose of useLayoutEffect is to let your component use layout information for rendering (useLayoutEffect의 목적 --> 컴포넌트가 렌더링에 레이아웃 정보를 사용할 수 있도록 하는 것)

• 서버 렌더링 환경에서 에러 없이 useLayoutEffect 사용하려면
  - useEffect 대체하자.
  • 활용.
    • hydration 이후에 사용할 수 있도록 훅 만들어주자.
      - useSyncExternalStore 사용
• repaint 전에 호출되는 훅이다.
• 문서에서 useEffect setup 부분과 다른 설명: Before your component is added to the DOM, setup 함수가 호출된다.
• Before your component is removed from the DOM, clean up 함수가 호출된다.
• SSR 프레임워크를 쓰는 경우에는 useLayoutEffect보다는 useEffect를 써야할 수도 있다. 또는 Suspense 컴포넌트를 활용해서 클라이언트사이드에서만 렌더링되게 해볼 수도 있다.

useInsertionEffect

• useInsertionEffect는 레이아웃 이펙트가 발생하기 전에 요소를 DOM에 삽입할 수 있게 하는 것.
• CSS in JS 라이브러리 개발자를 위한 훅이다. layout effects 가 동작하기 전에 style 태그를 DOM에 집어넣기 위해 호출되는 훅이다.
• 이 훅 안에서는 state setter(setState)할 수 없고, ref가 지원되지 않고, DOM 업데이트 전 또는 후에 실행될 수 있으니까 무조건 한쪽 라이프사이클만 생각하고 코드를 작성하면 안된다.