useEffect

• useEffect는 컴포넌트를 외부 시스템과 동기화할 수 있는 React Hook입니다.
• useEffect는 컴포넌트의 최상위에선 호출하여 이펙트를 선언합니다.

useEffect(setup, dependencies?)

Parameters ( 매개변수 )

• setup
  • 이펙트의 로직이 포함된 함수입니다. 선택적으로 cleanup 함수를 리턴할 수 있습니다.
  • 컴포넌트가 DOM에 처음 추가되면 React는 setup 함수를 실행합니다.
  • 컴포넌트가 DOM에서 제거된 후에는 cleanup 함수를 실행합니다.
  • dependecies이 설정되어 있다면, dependecies에 해당하는 값이 변경될 때 마다, 이전 값을 cleanup 함수를 실행한 다음 새로운 값을 setup 함수를 실행합니다.
• optional ( dependecies )
  • setup 함수에서 참조하는 reative value의 목록입니다. reative value는 props와 상태, 컴포넌트 내부에서 선언된 모든 변수와 함수를 포함할 수 있습니다.
  • dependecies 목록에는 일정한 수의 항목이 있어야하며, [dep1, dep2, dep3]와 같이 인라인으로 작성해야 합니다.
  • Object.is 비교 알고리즘을 사용하여 목록의 각 값을 이전 값과 비교하고 변화가 있다면 setup 함수를 호출 합니다.
  • dependecies 목록이 빈 배열일 경우, 컴포넌트가 다시 랜더링될 때마다 Effect가 다시 실행됩니다.

Returns ( 반환값 )

• useEffect는 undefined를 반환합니다.

주의

• 외부 시스템과 동기화하는 것이 아니라면 Effect가 필요하지 않을 것입니다.
• dependecies 목록에 컴포넌트 내부에서 정의된 객체나 함수가 있을 경우 이펙드가 필요 이상으로 자주 실행될 위험이 있습니다.
• 상호작용으로 인해 이펙드가 발생한 것이 아니라면, React는 이펙트가 실행되기전에 브라우저가 업데이트 된 UI를 그리게 합니다. 따라서 지연이 눈에 띄게 발생할 경우 useLayoutEffect로 바꿔야 합니다.
• 클릭과 같은 상호작용으로 인해 이펙트가 발생한 경우에도 브라우저는 이펙트 내부의 상태 업데이트를 처리하기 전에 UI를 다시 그릴 수 있습니다. 만일 이를 막기 위해서는 useLayoutEffect로 바꿔야 합니다.
• 이펙트는 클라이언트에서만 실행되고 서버 랜더링 중에는 실행되지 않습니다.