React Hooks 3: React 18의 새로운 Hooks

Concurrency, Automatic Batching, 새로운 Transitions 및 Suspense 기능과 같은 React 18의 새로운 업데이트에 여전히 익숙해지고 있습니다. 그래도 이 섹션을 마치기 위해 React 18의 새로운 Hooks를 살펴보겠습니다.

사용 ID

이 새로운 후크는 수화 불일치를 피하면서 클라이언트와 서버 양쪽에서 고유한 ID를 생성합니다.

이 후크는 고유 ID가 필요한 접근성 API와 통합된 구성 요소 라이브러리에서 주로 유용합니다.

기억하세요: useId는 목록에서 키를 생성하기 위한 것이 아닙니다. 키는 데이터에서 생성되어야 합니다.

기본 예제의 경우 ID가 필요한 요소에 직접 ID를 전달하십시오.

function Checkbox() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>This is an Example</label>
      <input id={id} type="checkbox" name="react"/>
    </>
  );
};

동일한 구성 요소에 있는 여러 ID의 경우 동일한 ID를 사용하여 접미사를 추가합니다.

function NameFields() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id + '-firstName'}>First Name</label>
      <div>
        <input id={id + '-firstName'} type="text" />
      </div>
      <label htmlFor={id + '-lastName'}>Last Name</label>
      <div>
        <input id={id + '-lastName'} type="text" />
      </div>
    </div>
  );
}

useTransition 및 startTransition

이를 통해 일부 상태 업데이트를 긴급하지 않은 것으로 표시할 수 있고 일부 업데이트는 기본적으로 긴급한 것으로 간주될 수 있으며(텍스트 입력 업데이트) 이러한 업데이트는 긴급하지 않은 업데이트를 중단할 수 있습니다.

const [isPending, startTransition] = useTransition();
//startTransition lets you mark updates in the provided callback as transitions:
startTransition(() => {
  setCount(count + 1);
})
//isPending indicates when a transition is active to show a pending state:
function App() {
  const [isPending, startTransition] = useTransition();
  const [count, setCount] = useState(0);

  function handleClick() {
    startTransition(() => {
      setCount(c => c + 1);
    })
  }

  return (
    <div>
      {isPending && <Spinner />}
      <button onClick={handleClick}>{count}</button>
    </div>
  );
}

useDeferredValue

값을 수락하고 보다 긴급한 업데이트를 연기할 값의 새 복사본을 반환합니다. 현재 렌더링이 사용자 입력과 같은 긴급 업데이트의 결과인 경우 React는 이전 값을 반환한 다음 긴급 렌더링이 완료된 후 새 값을 렌더링합니다.

이는 업데이트를 연기하기 위해 디바운싱 또는 스로틀링을 사용하는 사용자 공간 후크와 유사합니다. 이를 사용하는 이점은 React가 다른 작업이 완료되자마자(임의의 시간을 기다리는 대신) 업데이트에서 작동하고, 지연된 값은 기존 콘텐츠에 대한 예기치 않은 폴백을 트리거하지 않고 일시 중단될 수 있다는 것입니다.

또한 전달한 값만 연기합니다. 긴급 업데이트 중에 하위 구성 요소가 다시 렌더링되지 않도록 하려면 해당 구성 요소도 React Memo 또는 React useMemo로 메모해야 합니다.

function Typeahead() {
  const query = useSearchQuery('');
  const deferredQuery = useDeferredValue(query);

  // Memoizing tells React to only re-render when deferredQuery changes,
  // not when query changes.
  const suggestions = useMemo(() =>
    <SearchSuggestions query={deferredQuery} />,
    [deferredQuery]
  );

  return (
    <>
      <SearchInput query={query} />
      <Suspense fallback="Loading results...">
        {suggestions}
      </Suspense>
    </>
  );
}

useInsertionEffect(라이브러리에서 사용하도록 의도됨)

useInsertionEffect는 CSS-in-JS 라이브러리가 렌더링에 스타일 삽입의 성능 문제를 해결할 수 있도록 하는 새로운 후크입니다. CSS-in-JS 라이브러리를 이미 구축하지 않았다면 이것을 사용하지 않을 것입니다.

이 모든 정보 및/또는 추가 참조의 출처로 React Hooks Documentation.을 검토해야 합니다.


읽어주셔서 감사합니다. 시간 내주셔서 감사합니다. 도움이 필요하거나 질문이 있으시면 연락주세요!

질문이 있으시면 언제든지 저에게 메시지를 보내시거나 email로 보내주십시오. 😊

좋은 하루 되세요!