useEffect

📋 useEffect

컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook
useEffect를 사용해 컴포넌트가 마운트, 언마운트 될 때 혹은 업데이트될 때 특정 작업을 처리할 수 있는 것이다.

useEffect() 구조

기본 구조는 아래와 같다.

useEffect(function(), deps);

function()은 수행하고자 하는 작업이며, deps는 배열 형태로 요소로는 검사하고자 하는 특정 값이나, 빈 배열이 올 수 있다.

아래와 같이 deps에 빈 배열이 올 경우에는 컴포넌트가 최초 렌더링 되었을 때만 실행된다.

deps를 생략할 경우 렌더링 될때마다 해당 함수가 실행된다.

• 최초 렌더링 시 단 한번 실행

useEffect(() => {
  console.log("최초 한번만 실행");
}, []);

• 렌더링마다 실행

useEffect(() => {
  console.log("최초 한번만 실행");
});

컴포넌트의 특정 상태 값이 업데이트될 시점에만 useEffect() 함수를 사용할 수도 있다.

아래 예시를 보자.

deps에 특정 값을 넣으면 컴포넌트가 처음 마운트 되어도 호출이 되고, 특정 값이 바뀌어도 호출이 된다.

deps에 지정한 count 값이 증가될 때마다 함수가 실행되는 것이다.

const App = () => {

  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("button clicked!")
  }, [count]);

  return (
    <div>
      <p>Total Click : {count}</p>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>click</button>
    </div>
  )
}

참고

노마드코더
벨로퍼트와 함께하는 모던 리액트