TIL - React 훅 소개

React는 꾸준히 진화하면서 개발자들이 더 효율적으로 작업할 수 있도록 새로운 훅(Hook)을 도입하고 있습니다. 이번 글에서는 최근에 추가된 몇 가지 흥미로운 훅들을 소개하고, 그 사용 예시를 공유하고자 합니다.

 

1. useId

useId 훅은 컴포넌트 내에서 고유한 ID를 생성하는 데 사용됩니다. 이는 폼 요소나 ARIA 속성에서 유용하게 사용할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다:

import { useId } from 'react';

function MyComponent() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>Name:</label>
      <input id={id} type="text" />
    </div>
  );
}

 

 

2. useSyncExternalStore

useSyncExternalStore 훅은 외부 스토어의 상태를 구독하고 동기화하는 데 사용됩니다. Redux와 같은 외부 상태 관리 라이브러리와 함께 사용할 수 있습니다. 다음은 그 사용 예시입니다:

import { useSyncExternalStore } from 'react';

function useExternalStore(store) {
  return useSyncExternalStore(
    store.subscribe,
    store.getState,
    store.getSnapshot
  );
}

function MyComponent() {
  const state = useExternalStore(myStore);
  return <div>{state}</div>;
}

 

 

3. useInsertionEffect

useInsertionEffect 훅은 스타일을 삽입하거나 DOM 변경 전에 작업을 실행하는 데 사용됩니다. 이는 렌더링 성능을 최적화하는 데 유용합니다. 예시는 다음과 같습니다:

import { useInsertionEffect } from 'react';

function MyComponent() {
  useInsertionEffect(() => {
    const style = document.createElement('style');
    style.textContent = `
      body {
        background-color: lightblue;
      }
    `;
    document.head.appendChild(style);
    return () => {
      document.head.removeChild(style);
    };
  }, []);
  return <div>Hello World</div>;
}

 

 

4. useDeferredValue

useDeferredValue 훅은 고비용 연산을 지연하여 UI 업데이트가 더 원활하게 이루어지도록 합니다. 다음은 그 예시입니다:

import { useState, useDeferredValue } from 'react';

function MyComponent() {
  const [text, setText] = useState('');
  const deferredText = useDeferredValue(text);

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <p>{deferredText}</p>
    </div>
  );
}

 

이러한 최신 훅들은 React 개발을 더욱 효율적으로 만들어주며, 애플리케이션 성능을 최적화하는 데 큰 도움이 됩니다.