React 기초(4) - useEffect

useEffect

컴포넌트가 렌더링이 될 때마다 리액트에게 어떤 일을 실행시킬 수 있게 해준다.

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

function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(count);
  })
  
  const increment = () => {
    setCount(count + 1);
  }
  return (
    <div className="App">
      <h1>kgw</h1>
      <button onClick={increment}>Click</button>
    </div>
  );
}

export default App;

state를 두개를 둔다고 가정한다면 두번째 state 역시 클릭할 때 리렌더링이 되므로 콘솔에는 +1이 되지 않고 count값이 0으로 찍힐 것이다.

만약 count가 변경될 때만 리렌더링이 실행되게 하고 싶으면 어떻게 해야할까? 그렇다면 useEffect의 두번째 인자에 값을 넣으면 된다. 이 인자는 특정한 상태가 업데이터 되었을 때만 effect가 실행되도록 설정할 수 있다.

만약 []과 같은 빈 배열을 넣는다면 리렌더링 된다 하여도 어떤 state도 변화하지 않는다. 이렇게 쓰면 첫 렌더링이 일어날 때만 실행시키고 그 이후에는 실행시키지 않는다.

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

function App() {
  const [count, setCount] = useState(0);
  const [count2, setCount2] = useState(0)
  useEffect(() => {
    console.log(count);
  }, [count])
  
  const increment = () => {
    setCount(count + 1);
  }
  return (
    <div className="App">
      <h1>kgw</h1>
      <button onClick={increment}>Click</button>
      <button onClick={() => setCount2(count2 + 1)}>Click</button>
    </div>
  );
}

export default App;