React에서 useEffect의 의존성 배열

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

const [color, setColor] = useState('green');

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

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

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

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

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

function changeColor() {
	setColor('orange');
}

사용자 이름을 위한 상태가 주어졌습니다. 이름이 변경될 때마다 상태 값이 브라우저의 로컬 스토리지에 저장되도록 만드세요.