React에서 효과 훅 useEffect

효과를 작업하기 위해 훅 useEffect가 사용됩니다. 그 작동을 살펴보겠습니다.

먼저 우리의 훅을 임포트합니다:

App.jsximport { useEffect } from 'react';

제목을 포함하는 컴포넌트 App을 생성하겠습니다:

App.jsxfunction App() {
  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;

렌더링 후에 어떤 작업을 수행해야 한다고 가정해 보겠습니다, 예를 들어 전체 페이지의 배경색을 설정하는 것입니다. 이 경우 외부 시스템은 브라우저의 DOM이 됩니다.

우리의 훅을 적용해 보겠습니다:

App.jsxfunction App() {
  useEffect(() => {
    document.body.style.backgroundColor = 'green';
  }, []);
  
  ...
}

두 번째 매개변수로 의존성 배열이 전달됩니다. 여기에는 컴포넌트 함수에서 사용되는 값들이 포함됩니다. 지금은 비워 두었습니다. 이 경우 색상은 렌더링 후 한 번만 녹색으로 설정됩니다. 두 번째 매개변수를 완전히 제거할 수는 없습니다, 왜냐하면 여러분의 컴포넌트가 무한 루프에 빠질 수 있기 때문입니다.