[React] 10. useEffect

 

 

 목차

1. useEffect 란?
   • side effect 란?
2. useEffect의 실행 시점
3. 사용 예시
   1. 배열이 없는 useEffect
   2. 배열이 비어있는 useEffect
   3. 배열에 종속성이 있는 useEffect

 

 

 

1. useEffect 란?

• 첫 랜더링 시에 혹은 상태 변수, 오브젝트가 변경되면 업데이트를 해주는 함수
• 리액트에서 side effect를 관리하는 데 사용되는 hook (생명 주기를 관리하는 역할)
  *side effect : 컴포넌트들이 어플리케이션에서 일어나는 다른 모든 외부와의 상호 작용하는 것

 

 

2. useEffect의 실행 시점

1. App() 함수의 최초 실행될 때 (= 마운트)
2. 상태 변수가 변경될 때

 

 

3. 사용 예시

1. 배열이 없는 useEffect

• 마운트될 때마다 Side Effect 실행

  useEffect(()=>{
    console.log('배열 없는 useEffect');   // 컴포넌트가 랜더링 될 때마다 실행되는 side effect 
  });

 

 

2. 배열이 비어있는 useEffect

• 컴포넌트가 마운트될 때 Side Effect가 한 번만 실행

  useEffect(()=>{
    console.log('빈 배열 useEffect');     // 컴포넌트가 랜더링 될 때마다 실행되는 side effect 
  }, []);

 

 

3. 배열에 종속성이 있는 useEffect

• 배열 내의 값이 변경될 때마다 Side Effect 실행

  useEffect(()=>{
    console.log('종속성 있는 useEffect');  // 종속성이 변경될 때마다 실행되는 Side Effect
  }, [search]);                         // 리스트에 종속할 데이터(배열) 입력

 

 

---

 

 

import { useEffect, useState } from 'react';
import './App.css';

function App() {

  const [data, setData] = useState(0);
  const [search, setSearch] = useState(0);

  const test = () =>{
    let testData = 5;
    setData(testData);  // setData에 5를 할당
  };

  // 실행 시점 : 
  // (1) App() 함수의 최초 실행될 때 (= 마운트될 때)
  //    (1-1) 배열 없는 useEffect
  //    (1-2) 빈 배열 useEffect
  //    (1-3) 종속성 있는 useEffect
  // (2) 상태 변수가 변경될 때
  //    * dependencyList에 등록되어 있어야 함 (= 리스트에 종속할 데이터(배열) 입력)
  //    * 의존리스트를 관리할 수 있다

  // (1-1) 배열이 없는 useEffect
  // - 마운트될 때마다 side effect 실행
  useEffect(()=>{
    console.log('배열 없는 useEffect');   // 컴포넌트가 랜더링 될 때마다 실행되는 side effect 
  });

  // (1-2) 배열이 비어있는 useEffect
  // - 컴포넌트가 마운트될 때 side effect가 한 번만 실행
  useEffect(()=>{
    console.log('빈 배열 useEffect');     // 컴포넌트가 랜더링 될 때마다 실행되는 side effect 
  }, []);
  
  // (1-3) 배열에 종속성이 있는 useEffect
  // - 배열 내의 값이 변경될 때마다 side effect 실행
  useEffect(()=>{
    console.log('종속성 있는 useEffect');  // 종속성이 변경될 때마다 실행되는 Side Effect
    test();
  }, [search]);                         // 리스트에 종속할 데이터(배열) 입력

  return (
    <div>
      <button
        onClick={()=>{
          setSearch(2);
        }}>검색하기
      </button>

      <h1>데이터 : {data}</h1>
      <button
        onClick={()=>{
          setData(data + 1);
        }}>더하기
      </button>
    </div>
  );

}

export default App;