props와 state의 차이는 무엇인가요?

둘 다 컴포넌트가 무엇을 render할지에 영향을 주는 데이터를 담지만, 누가 데이터를 소유하는지와 변경될 수 있는지에서 차이가 있습니다.

• props는 부모로부터 컴포넌트 안으로 전달됩니다. 이는 **읽기 전용(read-only)**입니다 — 컴포넌트는 절대 이를 수정해서는 안 됩니다.
• state는 컴포넌트 내부에서 소유하고 관리됩니다. 시간이 지남에 따라 변경될 수 있으며, 변경하면 re-render가 트리거됩니다.

예시

// `step`은 PROP입니다 — 부모가 주고 자식은 읽기만 합니다.
// `count`는 STATE입니다 — 여기서 소유하고, 클릭 시 변경되며, re-render를 유발합니다.
function Counter({ step }) {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + step)}>
      {count}
    </button>
  );
}


< step={} />

데이터는 아래로 흐르고(부모 → 자식, props를 통해), 변경은 위로 흐릅니다(자식이 onChange 같은 콜백 prop을 통해 부모에게 변경을 요청). 이 단방향 흐름이 React 앱을 예측 가능하게 만듭니다.

어느 것을 사용할지 결정하는 방법

• 위에서 내려오고 컴포넌트가 변경해서는 안 됨 → prop.
• 컴포넌트가 시간에 따라 변경해야 함 → state.
• props를 변경(props.x = 1)하는 것은 버그입니다 — React는 re-render하지 않으며 부모의 소유권을 깨뜨립니다. "prop을 변경"하려면 부모가 준 콜백을 호출하여 부모가 자신의 state를 업데이트하고 새 값을 아래로 전달하도록 하세요.