use effect 정리

useEffect는 React에서 사이드 이펙트를 처리하기 위한 훅이다. 사이드 이펙트란 데이터 fetching, 구독 설정, DOM 직접 조작 등 컴포넌트의 렌더링과는 직접적인 관련이 없는 작업을 의미한다. 컴포넌트가 렌더링될 때마다 특정 작업을 수행하고, 필요에 따라 정리 작업을 수행할 수 있도록 한다. useEffect 훅은 다음과 같은 방식으로 사용된다.

 

1. 기본 사용법: useEffect는 컴포넌트가 렌더링될 때마다 실행된다. 기본적으로 useEffect는 두 개의 인자를 받는다. 첫 번째 인자는 실행할 함수이며, 두 번째 인자는 의존성 배열이다. 의존성 배열에 지정된 값이 변경될 때만 실행된다. 만약 두 번째 인자를 제공하지 않으면, useEffect는 매번 렌더링될 때마다 실행된다.

useEffect(() => {
  // 컴포넌트가 렌더링될 때마다 함수 실행
}, []);

 

 

2. 의존성 배열 사용법: 의존성 배열을 사용하면 useEffect가 언제 실행될지를 제어할 수 있다. 배열에 포함된 값이 변경될 때만 useEffect가 실행된다. 만약 배열이 빈 배열이라면, useEffect는 컴포넌트가 처음 마운트될 때 한 번만 실행된다.

useEffect(() => {
  // count가 변경될 때만 함수 실행
}, [count]);

 

 

3. 정리 함수: useEffect는 함수에서 반환된 값을 정리 함수로 사용하여 컴포넌트가 언마운트될 때나 의존성 배열의 값이 변경될 때 정리 작업을 수행할 수 있다. 이 정리 함수는 일반적으로 구독 해제나 타이머 정리와 같은 작업을 수행한다.

useEffect(() => {
  // 사이드 이펙트 작업
  return () => {
    // 컴포넌트가 언마운트될 때나 의존성 배열이 변경될 때 함수 호출
  };
}, [dependency]);

 

 

4. 의존성 배열 생략: 의존성 배열을 생략하면, useEffect는 매 렌더링마다 실행된다. 이 경우 주의가 필요하며, 불필요한 리렌더링이 발생할 수 있다.

useEffect(() => {
  // 컴포넌트가 렌더링될 때마다 함수 실행
});

이와 같이, useEffect를 사용하면 React 컴포넌트의 라이프사이클에 맞춰 적절히 사이드 이펙트를 관리할 수 있다.