[React] useEffect

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/

---

1.사이드 이펙트(Side Effect)

함수형 프로그래밍에서 사용되는 개념으로, 함수의 실행이 외부 상태를 변경하거나 외부 상태에 의존하는 경우를 의미합니다.
사이드 이펙트는 함수나 컴포넌트가 실행되는 동안 내부 상태가 아닌 외부 상태에 영향을 미치거나, 외부 상태에 의해 영향을 받는 작업입니다.

 

 

 

2.useEffect

useEffect는 리액트 함수형 컴포넌트에서 사이드 이펙트(side effects)를 관리하기 위한 훅입니다. 사이드 이펙트는 데이터 가져오기, 구독 설정, DOM 조작, 타이머 설정 등 컴포넌트의 렌더링과는 직접적으로 관련이 없는 작업을 포함합니다.

useEffect(() => {
  // 이곳에 사이드 이펙트를 수행하는 코드 작성

  // (선택 사항) cleanup 함수 반환
  return () => {
    // cleanup 작업
  };
}, [/* 의존성 배열 */]);

 

 

import React, { useState, useEffect } from 'react';

function ButtonClickLogger() {
  const [count, setCount] = useState(0); // 상태 초기화

  useEffect(() => {
    // count 값이 변경될 때마다 실행됩니다.
    console.log(`버튼 클릭 횟수: ${count}`);
    
    // cleanup 함수는 컴포넌트가 언마운트되거나 다음 이펙트가 실행되기 전 호출됩니다.
    return () => {
      // 예를 들어, 이전 타이머 정리 등의 작업을 수행할 수 있습니다.
    };
  }, [count]); // count가 변경될 때마다 이펙트 실행

  return (
    <div>
      <p>버튼을 클릭한 횟수: {count}</p>
      <button onClick={() => setCount(count + 1)}>클릭하세요!</button> {/* 버튼 클릭 시 count 증가 */}
    </div>
  );
}

export default ButtonClickLogger;

 

 

3. 코드 흐름

3-1.초기 렌더링(마운트)

컴포넌트가 처음 렌더링될 때 useEffect 훅이 실행됩니다.
이때 count의 초기 값은 0이므로, console.log에 버튼 클릭 횟수: 0이 출력됩니다.

 

 

 

3-2.버튼 클릭

버튼을 클릭할 때마다 setCount 함수가 호출되어 count 상태가 증가합니다.

 

 

3-3.useEffect의 재실행(업데이트 )

useEffect의 의존성 배열 [count]에 count가 포함되어 있기 때문에, count가 변경될 때마다 useEffect가 다시 실행됩니다.

 

 

 

3-4.정리 작업 ( 언마운트 )

useEffect 내에 정의된 반환 함수는 컴포넌트가 언마운트되거나 count가 변경되기 전에 실행됩니다.

 

 

 

 

 

 

 

 

4.의존성 배열

useEffect의 의존성 배열([])은 이펙트가 실행되는 시점을 결정합니다.
의존성 배열에 포함된 값이 변경될 때마다 이펙트가 다시 실행됩니다.

 

 

 

4-1.의존성 배열이 있는 경우 [count]

의존성 배열에 count가 포함되어 있으면, count 값이 변경될 때마다 useEffect가 실행됩니다.

useEffect(() => {
  console.log(`버튼 클릭 횟수: ${count}`);
}, [count]); // count가 변경될 때마다 이펙트 실행

 

 

 

 

4-2.의존성 배열이 없는 경우

useEffect는 매 렌더링마다 실행됩니다.즉, 컴포넌트가 처음 렌더링될 때와 상태가 변경될 때마다 useEffect가 실행됩니다.
이 경우, 상태나 props가 변경되지 않아도 이펙트가 매번 실행되기 때문에, 성능 상의 비효율이 발생할 수 있습니다. 특히, 불필요한 렌더링을 유발할 수 있습니다.

useEffect(() => {
  console.log(`버튼 클릭 횟수: ${count}`);
});

 

 

 

4-3.빈 의존성 배열 []

빈 의존성 배열을 사용하면, useEffect는 컴포넌트가 처음 렌더링될 때 한 번만 실행됩니다.

useEffect(() => {
  console.log(`컴포넌트가 처음 렌더링될 때만 실행됩니다.`);
}, []);

 

 

 

 

5. useEffect가 사용되는 경우

 

• 데이터 Fetching
  • 설명: 컴포넌트가 렌더링될 때 서버로부터 데이터를 가져와서 상태를 업데이트합니다.
• 타이머 및 간격 설정
  • 설명: 특정 시간 간격으로 작업을 실행하거나 일정 시간이 지난 후 작업을 수행합니다.
• 이벤트 리스너 설정
  • 설명: 사용자 입력(예: 클릭, 스크롤 등)에 대한 이벤트를 등록합니다.
• DOM 조작
  • 설명: 컴포넌트가 렌더링된 후 특정 DOM 요소를 직접 수정합니다. 예를 들어, 포커스를 설정하거나 애니메이션을 시작합니다.
• 구독 관리
  • 설명: 웹소켓, 데이터 스트림 등 외부 데이터 소스에 구독하거나 연결을 설정합니다.
• 로컬 스토리지 또는 세션 스토리지와의 상호작용
  • 설명: 사용자 데이터를 로컬 스토리지나 세션 스토리지에 저장하거나 불러옵니다.
• 자원 정리
  • 설명: 컴포넌트가 언마운트될 때 타이머, 네트워크 요청, 구독 등을 정리합니다.