useEffect

useEffect는 React 함수형 컴포넌트에서 side effect(부수 효과)를 수행하기 위해 사용되는 Hook 중 하나입니다. Side effect는 컴포넌트의 렌더링과는 직접적으로 관련이 없는 작업들로, 주로 데이터 fetching, 구독(subscription) 설정, 수동으로 DOM을 조작하는 작업 등을 포함합니다.

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있습니다. 또한, 특정 종속성(dependency)이 변경될 때마다 이를 감지하여 특정 작업을 수행할 수도 있습니다.

기본적인 useEffect의 형태는 다음과 같습니다:

useEffect(() => {
  // 특정 작업 수행
  // ...

  // 컴포넌트가 언마운트 될 때 정리(clean-up) 작업을 수행하려면
  return () => {
    // 정리 작업 수행
    // ...
  };
}, [dependencies]);

첫 번째 인자: 수행할 작업이 담긴 함수입니다.
두 번째 인자(옵션): 의존성 배열(dependency array)로, 이 배열에 포함된 값들이 변경될 때마다 useEffect가 실행됩니다. 만약 두 번째 인자를 제공하지 않으면 매 렌더링 시에 useEffect가 실행됩니다.

useEffect는 주로 데이터 fetching, 구독 설정 및 해제, 수동으로 DOM 조작 등에 사용되며, 컴포넌트의 생명주기와 관련이 있는 작업들을 함수 컴포넌트에서 수행할 수 있게 해줍니다.