React에서 컨텍스트 업데이트하기

이번 레슨에서는 컨텍스트 값이 변경될 때 컴포넌트를 업데이트하는 방법을 살펴보겠습니다. 컨텍스트가 변경되기를 원할 수 있다고 가정해 보겠습니다.

이 경우 컨텍스트를 상태와 함께 사용하는 것이 유용합니다. 지난 레슨에서 만들었던 박스 애플리케이션을 약간 수정하고 버튼을 클릭하면 전달되는 값이 'metal box :)'로 변경되도록 만들어 보겠습니다.

자, App 파일을 가져와서 BigBox 뒤에 버튼을 그려봅시다:

App.jsxfunction App() {
  return (
    <MyContext.Provider value="small box :)">
      <BigBox />
      <button>click</button>
    </MyContext.Provider>
  );
}

다음으로, useState 훅을 임포트하고 name 상태를 만들어서 버튼 클릭 시 값이 변경되도록 합니다. 초기값은 우리가 바로 컨텍스트 값으로 전달했던 값, 즉 'small box :)'로 설정합니다:

App.jsxfunction App() {
  const [name, setName] = useState('small box :)');
}

이번에는 컨텍스트로 문자열 대신 name 상태를 전달하겠습니다:

App.jsx<MyContext.Provider value={name}>
  <BigBox />
  <button>click</button>
</MyContext.Provider>

마지막 단계로, 버튼 클릭 핸들러를 호출하고 setName 함수를 사용하여 상태 값을 'metal box :)'로 설정합니다. 그 후 버튼을 클릭하여 결과를 확인할 수 있습니다:

App.jsx<button onClick={() => {
  setName('metal box :)');
}}>click</button>