React_불필요한 State(상태) 관리 지양하기

리액트에서는 State가 변경될 때마다 컴포넌트가 리렌더링 된다.

때문에 불필요한 리렌더링을 방지하기 위해 필요한 값을 현재 props나 다른 state에서 계산할 수 있다면, 해당 값을 새로운 state 로 관리하지 말고 직접 계산해서 사용해야 한다.

파생 상태 Derived State (useState없이 계산)

• 기존 상태(state)나 props를 기반으로 새로운 값을 계산한 것
• 불필요한 useState를 만들지 않고도 매 렌더링마다 계산할 수 있는 값
• 기존의 상태(state)나 props가 변경되면 자동으로 업데이트됨

/*
props로 받은 count를 기반으로 useState를 사용하지 않고 
렌더링 시마다 최신 값으로 자동 계산
*/
function Component({ count }) {
  const doubled = count * 2; // 파생 상태
  return <p>{doubled}</p>;
}

계산된 값 Computed Value (useMemo 활용)

• 렌더링 중 즉시 계산할 수 있는 값 (state에서 파생될 필요 없음)
• 성능 최적화를 위해 값이 바뀔 때만 다시 계산하도록 uesMemo를 사용하여 최적화하는 패턴 (연산 비용이 크기 때문에 메모이제이션이 필요한 값)
• 값을 매번 새로 계산하는 게 비효율적이라면 useMemo 를 사용해서 최적화

// 어떤 입력값(props)을 기반으로 즉시 생성되는 값
function Profile({ name }) {
  const greeting = `안녕하세요, ${name}`; // 계산된 값 (Computed Value)
  return <h1>{greeting}</h1>;
}

import { useMemo } from "react";
// 이 경우는 계산된 값이면서 파생 상태이다.
//items라는 상태를 기반으로 즉시 계산할 수 있는 값이므로 파생 상태 & 계산된 값
// items가 변경될 때만 totalPrice를 다시 계산하고 그렇지 않으면 캐싱된 값을 재사용
function Cart({ items }) {
  const totalPrice = useMemo(() => {
    return items.reduce((sum, item) => sum + item.price, 0);
  }, [items]);
  return (
    <div>
      <h2>total Price: {totalPrice} won</h2>
    </div>
  );
}

하.. 파생 상태(Derived State) 와 계산된 값(Computed Value) 의 차이가 뭔지 너무 이해가 어려웠는데 결과적으로 정리하면

✅ 모든 파생 상태는 계산된 값이지만, 모든 계산된 값이 파생 상태인 것은 아니다.
✅ 파생 상태는 기존 상태에서 “파생”된 것이지만, 계산된 값은 단순 연산도 포함된다.

props를 통해 상태를 전달할 때 불필요한 useState를 만들지 않고 해결하는 방법

자식 컴포넌트에서 불필요하게 새로운 상태를 만들지 않고 부모 컴포넌트의 상태를 그대로 활용하거나, 필요한 경우 계산된 값을 전달하는 방식들

1. 부모에서 a 의 상태를 업데이트 함수를 자식에게 전달

const Parent = () => {
  const [a, setA] = useState(0);
  return <Children a={a} setA={setA} />;
};

const Children = ({ a, setA }) => {
  // a 를 직접 props로 받아서 사용 (새로운 상태 만들지 않음)
  return (
    <div>
      <p>{a}</p>
      <button onClick={() => setA(a + 1)}>증가</button>
    </div>
    // 버튼을 클릭하면 부모 상태(a)가 변경, 부모가 리렌더링되면서 새로운 value(a)가 전달
  );
};

2. 계산이 필요한 경우, 부모에서 미리 계산한 값을 props로 전달

const Parent = () => {
  const [count, setCount] = useState(0);
  const doubled = count * 2; // 자식 컴포넌트에서 계산하지 않고, 부모에서 미리 계산한 값을 전달
  return <Children doubled={doubled} />;
};

const Children = ({ doubled }) => {
  return <p>{doubled}</p>;
};

3. 상태를 전달하지 않고 그냥 값만 전달(부모에서 전달된 값이 상태 변화 없이 그냥 사용될 경우)

function App() {
  const a = 5; // 상태가 아닌 그냥 값
  return <Children a={a} />;
}

const Children = ({ a }) => {
  return <p>{a}</p>;
};

🔗 참고 자료 1
🔗 참고 자료 2