useState와 useMemo의 차이점이 무엇인가

useState vs. useMemo

• useState는 리액트 컴포넌트의 상태를 관리하는 훅으로 상태값을 저장하고, 상태를 업데이트하면 컴포넌트가 다시 렌더링됨
• useMemo는 계산된 값을 메모이제이션(기억)하여 불필요한 재계산을 방지함. 렌더링 중 값이 변하지 않으면 기존에 계산된 값을 재사용하여 성능을 최적화하는 데 사용됨

useState와 useMemo의 주요 차이점

• useState는 값을 저장하고 관리하는 역할을 하며, 그 값은 사용자의 상호작용이나 비동기 데이터 요청 등에 따라 변경될 수 있음
• useMemo는 컴포넌트가 렌더링될 때 특정 계산을 수행하고, 의존성이 변경되지 않으면 기존 값을 재사용함. 그러나 이 값은 자동으로 업데이트 되지않으며, 메모이제이션을 위한 훅임

결론

• 비동기 작업을 통해 데이터를 가져오거나 상태 업데이트가 필요한 경우에는 useEffect와 useState를 사용하는 것이 적절함
• 반대로 순수하게 계산된 값을 메모이제이션하고, 성능을 최적화하고자 한다면 useMemo가 적합함. useMemo는 동기적 계산만 처리하기 때문에, 비동기 작업을 할 수 없음

useCallback

useCallback을 사용해야 하는 경우

1. 함수를 자식 컴포넌트에 prop으로 전달할 때, 함수가 자주 재생성되어 자식 컴포넌트가 불필요하게 리렌더링 되는 상황.
2. useEffect의 의존성 배열에 함수가 포함될 때, 함수가 매번 새로 생성되지 않도록 안정적으로 참조를 유지하고 싶을 때.
3. 비용이 큰 함수 생성을 방지하고 성능 최적화가 필요할 때.

함수를 자식 컴포넌트에 전달할 때 리렌더링 방지

부모 컴포넌트에서 자식 컴포넌트로 함수를 prop으로 전달할 때, 부모 컴포넌트가 렌더링 될 때마다 함수가 새로 생성됨. useCallback을 사용하면, 해당 함수가 메모이제이션되어 의존성이 변경되지 않는 한 재생성되지 않도록 할 수 있다.

import React, { useState, useCallback } from "react";
import ChildComponent from "./ChildComponent";

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  // setTextHandler 함수는 매번 재생성되지 않고 메모이제이션됨
  const setTextHandler = useCallback((value) => {
    setText(value);
  }, []);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      {/* 자식 컴포넌트에 setTextHandler 함수를 전달 */}
      <ChildComponent onChange={setTextHandler} />
    </div>
  );
};

export default ParentComponent;