useEffect

• 외부 시스템과 컴포넌트를 동기화하는 React Hook
• 예를들어 state 를 기준으로, 리액트와 상관없는 구성요소를 제어하거나, 서버연결을 설정하거나, 구성요소가 화면에 나타날 때 분석 목적의 로그도 전송 가능하다.
• Effect 를 사용하면 렌더링 후 특정 코드를 실행하여 리액트 외부시스템 <-> 컴포넌트 사이의 동기화 가능.

대수적 효과(algebraic effects)

• 리액트 컴포넌트에서 사이드이펙트를 수행하기 위한 훅
• 컴포넌트 렌더링 이후에 실행된다.
  • 정확히는 레이아웃과 화면 그리기가 완료된 후에 비동기적으로 실행된다.
    • 렌더링 이후 실행: useEffect 는 리액트 컴포넌트의 렌더링이 화면에 커밋된 후에 실행된다. 즉, DOM 업데이트 이후 실행된다.
    • 브라우저 페인팅 차단 방지 : useEffect 를 동기적으로 즉시 실행하지 않고, 브라우저가 화면을 그리는 것을 차단하지 않도록 지연시킨다.
    • 이러한 비동기 실행은 성능을향상시킨다. 렌더링과 화면 업데이트가 먼저 완료되므로, 사용자는 더 빠르게 UI를 볼 수 있다.
    • 따라서, 여러개의 useEffect 가 있을 경우, 그들의 실행순서는 보장되지 않는다.
    • useLayoutEffect는 useEffect 의 동기버전이다.
    • useLayoutEffect 는 모든 DOM 변경 직후에 동기적으로 실행되며, 브라우저가 화면을 그리기 전에 실행된다.
• 리액트는 useEffect 호출을 기억하고, 렌더링 이후에 이를 실행한다.
• 의존성이 변경되면 이전 effect 를 클린업하고, 새로운 effect 를 실행한다.