[ react ] documentation hooks ( 18.2.0 )

State Hooks

State 를 사용하면 컴포넌트가 사용자 입력과 같은 정보를 "기억" 할 수 있습니다. 예를 들어 , form 컴포넌트는 state를 사용하여 입력 값을 저장하고 , 이미지 갤러리 컴포넌트는 state를 사용하여 선택한 이미지의 인덱스를 저장할 수 있습니다.

function ImageGallery() {
⁠
  const [index, setIndex] = useState(0);
  
⁠  // ...

 

 

⁠Context Hooks

context 를 사용하면 컴포넌트가 prop으로 전달하지 않고 멀리 떨어진 부모로부터 정보를 받을 수 있습니다. 예를 들어 , 앱의 최상위 컴포넌트는 아무리 깊이 있떠라도 현재 UI 테마를 아래의 모든 컴포넌트에 전달할 수 있습니다.

function Button() {
   const theme = useContext(ThemeContext);
   // ...

 

 

 

Ref Hooks

ref는 컴포넌트가 DOM 노드나 timeout ID 와 같이 렌더링에 사용되지 않는 일부 정보를 보유할 수 있게 해줍니다. state와 달리 ref를 업데이트해도 컴포넌트가 다시 렌더링되지는 않습니다. 브라우저 빌트인 API와 같이 react가 아닌 시스템에서 작업해야 할 때 유용합니다.

- useRef : ref를 선언합니다. 어떤 값을 담을 수 있지만 , 대부분 DOM 노드를 담는 데 사용됩니다. ⁠
⁠- useImperativeHandle : 컴포넌트가 노출하는 ref를 사용자가 직접 정의 할 수 있습니다.

function Form() {
  const inputRef = useRef(null);
  // ...

 

 

⁠Effect Hooks

Effect는 컴포넌트가 외부 시스템에 연결하고 동기화 할 수 있도록 합니다. 여기에는 네트워크 , 브라우저 DOM , 애니메이션 , 다른 UI 라이브러리를 사용하여 작성된 위젯 및 기타 비-react 코드를 처리하는 것이 포함됩니다.

- useEffect : 컴포넌트를 외부 시스템에 연결합니다.

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  // ...

- useLayoutEffect : 브라우저가 화면을 다시 그리기 전에 useLayoutEffect 가 실해됩니다. 레이아웃을 측정할 수 있습니다. ⁠ ⁠- useInsertionEffect : react 가 DOM을 변경하기 전에 useInsertionEffect 가 실행됩니다. 라이브러리는 여기에 동적 css 를 삽입할 수 있습니다. ⁠

 

⁠Performance Hooks

리렌더링 성능을 최적화하는 일반적인 방법은 불필요한 작업을 건너뛰는 것입니다. 예를 들어 , 캐시된 계산을 재사용하거나 이전 렌더링 이후 데이터가 변경되지 않은 경우 리렌더링을 건너뛰도록 react에 지시할 수 있습니다.

- useMemo : 비용이 많이 드는 계산 결과를 캐시할 수 있습니다.

- useCallback : 함수 정의를 캐시한 후 최적화된 컴포넌트로 전달할 수 있습니다.

 

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

화면이 실제로 업데이트되어야 하기 때문에 렌더링을 건너뛸 수 없는 경우도 있습니다. 이 경우 입력과 같이 동기화되어야 하는 차단 업데이트와 차트 업데이트와 같이 사용자 인터페이스를 차단할 필요가 없는 비차단 업데이트를 분리하여 성능을 향상 시킬 수 있습니다.

- useTransition : state 전환을 비차단 state로 표시하고 다른 업데이트가 이를 중단하도록 허용할 수 있습니다.

- useDeferredValue : UI의 중요하지 않은 부분의 업데이트를 연기하고 다른 부분이 먼저 업데이트 되도록 할 수 있습니다.

 

 

 

Resource Hooks

컴포넌트는 리소스를 상태의 일부로 보유하지 않고도 액세스할 수 있습니다. 예를 들어 컴포넌트는 Promise에서 메시지를 읽거나 컨텍스트에서 스타일링 정보를 읽을 수 있습니다.

- use : Promise or context 와 같은 리소스의 값을 읽을 수 있습니다.

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...
}