[타입스크립트] useEffect란?

`useEffect`는 React 라이브러리에서 제공하는 Hook 중 하나입니다. `useEffect`를 사용하면 컴포넌트가 렌더링될 때나 업데이트될 때 특정 작업을 수행할 수 있습니다. 이 Hook은 부수 효과(side effect)를 관리하기 위해 사용됩니다.

부수 효과는 컴포넌트 외부와의 상호작용을 의미합니다. 예를 들면 API 호출, 이벤트 등록 및 해제, 구독 등의 작업이 부수 효과에 해당합니다. `useEffect`를 사용하면 이러한 부수 효과를 컴포넌트에서 관리할 수 있습니다.

`useEffect`의 기본 구조는 다음과 같습니다:

useEffect(() => {
  // 부수 효과를 수행하는 코드
  // ...

  // 컴포넌트가 언마운트되거나 업데이트되기 직전에 정리(clean-up) 함수를 반환할 수도 있음
  return () => {
    // 정리(clean-up) 작업을 수행하는 코드
    // ...
  };
}, [dependency]);

 

`useEffect`의 첫 번째 인자는 부수 효과를 수행하는 함수입니다. 이 함수는 컴포넌트가 렌더링될 때마다 실행됩니다. 부수 효과 함수 내에서 API 호출이나 이벤트 등록과 같은 작업을 수행할 수 있습니다.

`useEffect`의 두 번째 인자는 의존성 배열(dependency array)입니다. 이 배열에는 부수 효과 함수가 의존하는 값들을 넣을 수 있습니다. 의존성 배열이 비어있을 경우 컴포넌트가 처음 마운트될 때만 부수 효과 함수가 실행되며, 의존성 배열에 값이 포함되어 있을 경우 해당 값이 변경될 때마다 부수 효과 함수가 실행됩니다.

`useEffect` 함수는 부수 효과 함수가 처음 실행될 때만 호출되고, 컴포넌트 업데이트 시에는 호출되지 않습니다. 만약 특정 상태 또는 프로퍼티가 변경될 때마다 부수 효과 함수를 실행하고 싶다면 의존성 배열에 해당 상태나 프로퍼티를 포함시켜야 합니다.