useEffect : 리액트 훅 사용법

useEffect는 함수형 컴포넌트에서 side effect(부수 효과)를 처리하기 위한 React 훅이다.

리액트에서의 사이드 이펙트란 컴포넌트의 렌더링 외부에서 발생하는 작업들을 의미한다.

예를 들면 서버에서 데이터 가져오기, 구독 설정, 타이머 설정, 수동으로 DOM 조작하기 등이 있다.

이 작업들은 다른 컴포넌트에 영향을 미칠 수 있으며 렌더링 중에는 작업이 완료 될 수 없다.

렌더링이 끝난 이후 실행되어야 하는 작업이다.

클래스 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 리사이프사이클 메서드를 사용해서 처리 했지만 함수형 컴포넌트에서는 useEffect()훅만으로 동일한 기능을 처리할 수 있다.

 

useEffect의 기본 사용법

useEffect는 두 가지 인자를 받는다.

1. 콜백함수 : 부수 효과를 실행할 로직을 작성하느 함수

2. 의존성 배열(optional) : useEffect가 실행되는 조건을 정의하는 배열이다. 이 배열을 통해 컴포넌트가 렌더링될 때마다 useEffect가 실행될지를 결정한다.

 

기본 형식

useEffect(() => {
  // 부수 효과 작업 실행
}, [/* 의존성 배열 */]);

 

1. 의존성 배열이 비어 있는 경우([])

컴포넌트가 처음 마운트될 때 한 번만 실행된다.

이건 componentDidMount와 비슷하다.

useEffect(() => {
  console.log('컴포넌트가 마운트되었습니다.');
}, []);

 

2. 의존성 배열이 있는 경우([dependency])

의존성 배열에 지정된 값이 변경될 때마다 useEffect가 실행된다. 즉, 배열 안에 있는 값이 업데이트될 때마다 효과를 실행한다.

useEffect(() => {
  console.log('id가 변경되었습니다.', id);
}, [id]);  // id가 변경될 때마다 실행

 

3. 의존성 배열이 없는 경우

이 경우 useEffect는 컴포넌트가 렌더링될 때마다 실행된다. componentDitUpdate와 유사하다.

useEffect(() => {
  console.log('컴포넌트가 렌더링되었습니다.');
});

 

useEffect에서의 Cleanup(정리 작업)

사이드 이펙트 효과가 실행되면 때로는 정리(cleanup)작업이 필요하다. 예를 들어, 구독을 해제하거나 타이머를 멈추는 등의 작업이다. useEffect는 정리 함수를 반환할 수 있다. 이 함수는 컴포넌트가 언마운트 될 때, 또는 의존성이 변경될 때 호출된다.

 

Cleanup 예시(타이머 해제)

useEffect(() => {
  const timer = setInterval(() => {
    console.log('타이머 실행 중');
  }, 1000);

  // Cleanup 함수
  return () => {
    clearInterval(timer);  // 타이머 해제
    console.log('컴포넌트 언마운트 또는 의존성 변경 시 타이머 해제');
  };
}, []);  // 의존성 배열이 비어있으면 컴포넌트 언마운트 시에만 실행됨

 

useEffect의 다양한 사용 패턴

1. 컴포넌트 마운트 시 한 번만 실행

useEffect(() => {
  console.log('컴포넌트 마운트 시 한 번 실행됩니다.');
}, []);  // 빈 배열: 컴포넌트 마운트 시 한 번만 실행

 

2. 특정 값이 변경될 때마다 실행

useEffect(() => {
  console.log(`id가 변경되었습니다. 새로운 id: ${id}`);
}, [id]);  // id가 변경될 때마다 실행

 

3. 렌더링마다 실행

useEffect(() => {
  console.log('컴포넌트가 렌더링될 때마다 실행됩니다.');
});

 

4. 여러 개의 의존성 배열을 사용할 경우

useEffect(() => {
  console.log('id 또는 name이 변경될 때 실행됩니다.');
}, [id, name]);  // id나 name이 변경될 때마다 실행

 

5. Cleanup을 포함한 예시

useEffect(() => {
  console.log('컴포넌트가 마운트 되거나 id가 변경되었습니다.');

  return () => {
    console.log('컴포넌트가 언마운트되거나 id가 변경되기 전 정리 작업');
  };
}, [id]);  // id가 변경될 때마다 실행, 정리 함수가 호출됨

 

정리

• useEffect는 부수 효과를 처리하는 훅이다.
• 의존성 배열을 통해 언제 useEffect가 실행될지 제어할 수 있다.
• 컴포넌트가 마운트될 때 한 번만 실행하려면 빈 배열([])을 사용한다.
• 의존성 배열에 값을 넣으면 해당 값이 변경될 때마다 useEffect가 실행된다.
• 정리 작업이 필요하면 useEffect에서 반환하는 함수로 처리할 수 있다.