React - 특정 작업들을 실행 시키는 훅 useEffect

리액트에서 가장 중요한 Hook useEffect입니다.

 

useEffect는 언제 사용해야 할까?

리액트의 역할은 UI화면을 렌더링 해서 화면에 가져오는 역할을 합니다.

state와 props 변경 시에 dom을 변경하기도 합니다.

 

Side Effect란?

리액트에서 제공하는 역할 외 작업들을 사이드 이펙트라고 합니다.

예를 들면 백엔드 서버에서 http 리퀘스트를 보내거나, 브라우저 저장소에 무언가를 저장하거나 하는 행위들입니다.

 

이러한 Side Effect를 실행할 때, 매번 컴포넌트가 렌더링 될 때마다 실행하게 되면

너무 많은 http 리퀘스트를 요청하거나, http 리퀘스트 이후에 state 변경을 해서 무한 루프에 빠지게 될 수 있습니다.

 

이러한 작업들을 useEffect를 이용해서 사용하시면 됩니다.

useEffect 사용법

useEffect(setup, dependencies?)

setup 

지정된 의존성 변경 이후 실행할 함수입니다.

dependencies

설정할 의존성을 배열로 입력합니다.

사용 예시

1. 의존성 없이 사용

컴포넌트가 렌더링 될 때마다 실행됩니다.

React.useEffect(() => {
   console.log('run effect', count);
});

2. 의존성 추가

count라는 state를 의존성 배열에 추가하였습니다.

count 값이 변경될 때마다 실행됩니다.

function App() {
  const [count, setCount] = React.useState(0);
  
  React.useEffect(() => {
    console.log('run effect', count);
  }, [count]);
  
  function plusHandler() {
    setCount(count + 1);
  }
  
  return <React.Fragment>
    <p>Hello React {count}</p>
    <button onClick={plusHandler}>+</button>
  </React.Fragment>
}

3. Cleanup 함수

useEffect 함수 내에 return 값으로 함수를 설정합니다.

정리 기능이며, 컴포넌트가 재렌더링 될 때 실행 됩니다.

function App() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log('run effect', count);
    
    return () => {
      console.log("clean up", count);
    }
  }, [count]);
  
  function plusHandler() {
    setCount(count + 1);
  }
  
  return <React.Fragment>
    <p>Hello React {count}</p>
    <button onClick={plusHandler}>+</button>
  </React.Fragment>
}

 

See the Pen Untitled by powerku (@powerku) on CodePen.