React useUpdate 훅

소개

이 랩에서는 React 의 useUpdate 훅 사용법을 살펴봅니다. 이 훅은 호출 시 컴포넌트를 강제로 다시 렌더링하도록 하여 새로운 데이터나 변경 사항으로 UI 를 업데이트하는 데 유용합니다. 이 랩을 마치면 애플리케이션의 성능과 기능을 향상시키기 위해 React 프로젝트에서 이 훅을 구현하는 방법에 대한 더 나은 이해를 얻게 될 것입니다.

React useUpdate 훅

index.html 및 script.js는 이미 VM 에 제공되었습니다. 일반적으로 script.js 및 style.css에만 코드를 추가하면 됩니다.

호출 시 컴포넌트를 강제로 다시 렌더링하려면 useReducer() 훅을 사용하여 업데이트될 때마다 새 객체를 생성하고 해당 dispatch 를 반환합니다. 다음은 useUpdate() 함수의 예시 구현입니다.

const useUpdate = () => {
  const [, update] = React.useReducer(() => ({}));
  return update;
};

그런 다음 필요할 때 다시 렌더링을 트리거하기 위해 컴포넌트에서 useUpdate()를 사용할 수 있습니다.

const MyApp = () => {
  const update = useUpdate();

  return (
    <>
      <div>Time: {Date.now()}</div>
      <button onClick={update}>Update</button>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<MyApp />);

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! React useUpdate 훅 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.