[react] useEffect

hooks라이브러리의 useEffect

UI가 최초 로드될 때 혹은 의존 상태 변수가 변경될 때 실행되는 함수다.

useEffect

function App() {

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

export default App;

• 더하기 버튼을 누를 때마다 data가 1씩 증가한다.

function App() {
  //실행시점:
  //1.App()함수가 최초 실행될 때(마운트될 때)
  //2.상태 변수가 변경될 때
  const download = () => { 
    let downloadData = 5;//가정
    setData(downloadData);
  };
  const [data, setData] = useState(0);
  useEffect(() => {
    console.log("useEffect 실행됨");
    download();
   });
  return (
  <div>
      <h1>{data}</h1>
      <button onClick={() => { setData(data+1)}}>더하기</button>
  </div>
  );
}

export default App;

• useEffect 최초 1회 무조건 실행된다.
• 버튼 클릭 시 실행 과정
  • data 1증가
  • UI 변경 ⇒ useEffect() 실행 ⇒ download() 실행
  • 결과적으로 data 5로 고정된다.

의존 리스트

• useEffect의 마지막 인자는 의존 리스트이다. 상태 변수 리스트를 넣어주고 상태변수가 변경될 때마다 useEffect를 실행시킨다.

function App() {
  //실행시점:
  //1.App()함수가 최초 실행될 때(마운트될 때)
  //2.상태 변수가 변경될 때
  const download = () => { 
    let downloadData = 5;//가정
    setData(downloadData);
  };
  const [data, setData] = useState(0);
  useEffect(() => {
    console.log("useEffect 실행됨");
    download();
   },[data]);
  return (
  <div>
      <h1>{data}</h1>
      <button onClick={() => { setData(data+1)}}>더하기</button>
  </div>
  );
}

export default App;

• 의존 리스트에 data변수를 넣어 data가 변경될때마다 useEffect를 실행시킨다.
• 빈 배열을 넣으면 최초 1회 실행되고 실행되지 않는다.