React에서 useEffect의 의존성 배열

이제 버튼 클릭으로 색상을 변경해 보겠습니다. 색상을 위한 상태 color를 만들고, 초기값을 설정합니다:

App.jsxconst [color, setColor] = useState('green');

useEffect 내의 문자열 값을 우리의 상태로 바꾸고, 대괄호 안의 의존성 배열에 추가하는 것을 잊지 마세요. 이제 효과는 상태 color가 변경될 때마다 실행될 것입니다:

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

이제 컴포넌트에 색상 변경 버튼을 추가해 보겠습니다:

App.jsxreturn (
  <div>
    <h1>React App</h1>
    <button onClick={changeColor}>change</button>
  </div>
);

또한, 색상을 주황색으로 변경할 클릭 핸들러 함수를 추가합니다:

App.jsxfunction changeColor() {
  setColor('orange');
}