[Hooks] useEffect

개요

• useEffect와 필수개념
• useEffect의 실행순서
• 부가정보

 

---

useEffect

side effect를 별도로 처리하기 위해서 사용하는 Hook으로 매번 컴포넌트가 렌더링 될 때 특정 조건에 의해 작업을 실행하며 컴포넌트가 순수 함수를 유지하도록 도와주는 함수

 

Side effect) 

함수 내 특정 동작이 함수 외부에 영향을 끼쳐, 프로그램의 동작을 이해하기 어렵게 만드는행위

• 서버와의 통신
• setTimeOut, setInterval
• React 외부와 상호작용

 

순수함수와 참조 투명성)

순수함수란 입력에 대해 항상 같은 결과를 반환해주는 함수로 외부와 관련이 없어 영향을 주지 않는 함수, 이러한 함수들은 참조에 투명하다고 하며 React에서 사용을 권장한다
재사용성의 증가와 예측 및 테스트가 쉽다

// 순수함수의 예시
const App = ({name}) => {
  return <div>{name}</div>;
};

---

useEffcet의 실행순서

useEffect가 실행되는 시점은 컴포넌트가 렌더링 된 이후이다.

여기서 랜더링 시점이란 맨처음 컴포넌트가 렌더링되어 화면에 마운트 되는 시점과 state와 props가 변하여 컴포넌트가 재랜더링되는 시점이다

function App() {
  console.log("useEffect 전");
  useEffect(() => {
    console.log("메롱으로 변환");
    const hi = document.getElementById("hi");
    hi.innerText = "메롱";
  });
  console.log("useEffect 후");
  return (
    <div className="App">
      <h1 id="hi">안녕하세요.</h1>
    </div>
  );
}

 

위와 같이 코드의 실행결과 useEffect 밖에서 호출된 console.log()가 2번 실행된 후 useEffect의 내부에서 실행이 되어 출력이 되는데 이를 통해서 랜더링 이후에 useEffect가 실행된다는 것을 알 수 있으며 그 이유는 랜더링이 이루어지기 전에 useEffect가 동작한다면 해당 useEffect 내부에서 지정한 DOM을 찾지 못하는 상황이 발생한다. 그렇기에 랜더링 이후에 실행되는 것이 React에서 올바르다고 판단했다

 

Dependencies에 따른 랜더링)

useEffect(() => {
  // 매 렌더링마다 실행
});

useEffect(() => {
  // 컴포넌트가 처음 렌더링된 실행
}, []);

useEffect(() => {
  // 컴포넌트가 처음 렌더링된 이후 실행
  // a나 b가 변경되어 컴포넌트가 재렌더링된 이후 실행
}, [a, b]);

 

 

Cleanup)

useEffect는 처음 랜더링되었을 때와 리랜더링되었을 때 작동하는 Hook이다. 이때 setInterval를 useEffect에 사용한다면 clear함수를 따로 지정을 해주어야하는데(지정하지 않으면 계속 남아있어서 무한으로 찍힘) 그때 사용하는 것이 unmount시에 작동하는 cleanup이다.

useEffect(() => {
    console.log("useEffect");
    const interval = setInterval(() => console.log(count), count);

    return () => {
      clearInterval(interval);
      console.log("clearInterval");
    };
  }, [count]);
  // 최초랜더링시에 useEffect가 찍히고 처음 count값이 찍힌다
  // 카운트를 증가시키면 리랜더링이 되므로 
  // 기존에 있던 상태에서 unmount로 넘어가 clearInterval이 찍히고
  // 이후 mount되면서 useEffect가 찍히고 count값이 변한 값으로 찍힌다

---

 

부모와 자식관계의 useEffect)

부모와 자식관계의 컴포넌트에서 각각 useEffect를 호출하였다면 자식이 먼저실행되고 부모가 다음에 실행된다.

또한 cleanup에서 state를 참고할 때에는 변하기 이전 값을 가져온다

ex) 최초랜더링시에 0을 초기값으로 가지는 count가 1로 변경이 될 떄 useEffect에 cleanup에서 호출되는 count는 0이다.

 

정리)

useEffect는 랜더링 후 발생한다. (상태변경이 먼저 일어남)

자식 컴포넌트가 부모 컴포넌트보다 먼저 랜더링된다.

useEffect의 setup함수는 마운트시 무조건 한 번 실행된다.

cleanup함수는 변경이 발생하기 이전 값을 참조하고 그 다음 변경이 반영되어 setup함수가 실행된다.

 

 

 

 

 

 

참고자료: 블로그1, 블로그2, Docs