React useDelayedState Hook

소개

이 랩에서는 React 에서 useDelayedState 훅을 사용하여 특정 조건이 충족될 때까지 상태 값을 생성하는 것을 지연시키는 방법을 배웁니다. 이 훅은 상태 값을 생성하기 전에 데이터 또는 props 가 로드될 때까지 기다려야 할 때 유용하며, 애플리케이션의 성능을 향상시키는 데 도움이 될 수 있습니다. 실용적인 예제를 통해 이 훅을 구현하는 방법과 React 컴포넌트에서 상태 값을 업데이트하는 데 사용하는 방법을 살펴보겠습니다.

React useDelayedState 훅

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

조건이 충족될 때까지 상태 값의 생성을 지연시키려면 다음 단계를 따르세요.

1. useState() 훅을 사용하여 실제 state와 부울 값인 loaded를 포함하는 상태 값을 생성합니다.
2. condition 또는 loaded가 변경되면 useEffect() 훅을 사용하여 상태 값을 업데이트합니다.
3. loaded가 참 (truthy) 일 경우에만 state 값을 업데이트하는 함수 updateState를 생성합니다.

const useDelayedState = (initialState, condition) => {
  const [{ state, loaded }, setState] = React.useState({
    state: null,
    loaded: false
  });

  React.useEffect(() => {
    if (!loaded && condition) setState({ state: initialState, loaded: true });
  }, [condition, loaded]);

  const updateState = (newState) => {
    if (!loaded) return;
    setState({ state: newState, loaded });
  };

  return [state, updateState];
};

useDelayedState 훅을 사용하는 방법의 예는 다음과 같습니다.

const App = () => {
  const [branches, setBranches] = React.useState([]);
  const [selectedBranch, setSelectedBranch] = useDelayedState(
    branches[0],
    branches.length
  );

  React.useEffect(() => {
    const handle = setTimeout(() => {
      setBranches(["master", "staging", "test", "dev"]);
    }, 2000);
    return () => {
      handle && clearTimeout(handle);
    };
  }, []);

  return (
    <div>
      <p>Selected branch: {selectedBranch}</p>
      <select => setSelectedBranch(e.target.value)}>
        {branches.map((branch) => (
          <option key={branch} value={branch}>
            {branch}
          </option>
        ))}
      </select>
    </div>
  );
};

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

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

요약

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