ReactHook 정리

sunjin·2024년 2월 9일

목록 보기

2/2

✨ useCallback

: 콜백의 메모이제이션된 버전을 반환 , 콜백의 의존성이 변경 되었을 때에만 변경
불필요한 렌더링을 방지하기 위해 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할때 유용

메모이제이션 : 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행 속도를 빠르게 하는 기술

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

예시

import React, { useState, useCallback } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  // 콜백 함수 정의
  const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase Count</button>
    </div>
  );
};

export default MyComponent;

✨ useRef

: .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환 하는것, 반환된 객체는 컴포넌트 전 생애주기를 통해 유지된다.
컴포넌트에서 변경 가능한 변수를 생성하고, 이를 유지하는 데 사용됨. useRef를 사용하면 컴포넌트의 렌더링과 관계없이 변수를 계속해서 참조할 수 있다

const refContainer = useRef(initialValue);

예시

import React, { useRef, useEffect } from 'react';

const MyComponent = () => {
  const countRef = useRef(0);

  useEffect(() => {
    countRef.current++; // countRef 변수 변경
    console.log(countRef.current); // 변경된 countRef 값 출력
  }, []);

  return <div>{countRef.current}</div>;
};

export default MyComponent;

✨ useMemo

: 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산 이 최적화는 모든 렌더링 시의 고비용 계산을 방지
useMemo 로 전달된 함수는 렌더링 중에 실행 된다. 렌더링 중에는 하지 않는 것을 useMemo 내에서 하지 말것

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

예시

import React, { useMemo } from 'react';

const MyComponent = () => {
  const expensiveResult = useMemo(() => {
    // 계산 비용이 많은 연산 수행
    return calculateExpensiveResult();
  }, []);

  return <div>{expensiveResult}</div>;
};

export default MyComponent;

훅은 아니지만...

✨ React.memo

: 리액트의 고차 컴포넌트(Higher-Order Component)로, 컴포넌트의 불필요한 리렌더링을 방지하기 위해 사용된다. React.memo는 컴포넌트를 감싸서 새로운 버전의 컴포넌트를 반환하며, 이 새로운 버전의 컴포넌트는 이전에 렌더링한 결과를 메모이제이션하여 동일한 props가 전달될 때 리렌더링을 방지

예시

import React from 'react';

const MyComponent = React.memo((props) => {
  // 컴포넌트의 렌더링 로직
  return <div>{props.value}</div>;
});

export default MyComponent;