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

Question

IT Interview Practice · Accepted Answer

둘 다 컴포넌트가 무엇을 render할지에 영향을 주는 데이터를 담지만, **누가 데이터를 소유하는지**와 **변경될 수 있는지**에서 차이가 있습니다. - **props**는 부모로부터 컴포넌트 *안으로* 전달됩니다. 이는 **읽기 전용(read-only)**입니다 — 컴포넌트는 절대 이를 수정해서는 안 됩니다. - **state**는 컴포넌트 *내부에서* 소유하고 관리됩니다. 시간이 지남에 따라 변경될 수 있으며, 변경하면 **re-render**가 트리거됩니다. ## 예시 ```jsx // `step`은 PROP입니다 — 부모가 주고 자식은 읽기만 합니다. // `count`는 STATE입니다 — 여기서 소유하고, 클릭 시 변경되며, re-render를 유발합니다. function Counter({ step }) { const [count, setCount] = useState(0); return ( ); } // 부모가 step을 결정하고 전달합니다: ``` 데이터는 **아래로** 흐르고(부모 → 자식, props를 통해), 변경은 **위로** 흐릅니다(자식이 `onChange` 같은 콜백 prop을 통해 부모에게 변경을 요청). 이 단방향 흐름이 React 앱을 예측 가능하게 만듭니다. ## 어느 것을 사용할지 결정하는 방법 - 위에서 내려오고 컴포넌트가 변경해서는 안 됨 → **prop**. - 컴포넌트가 시간에 따라 변경해야 함 → **state**. - props를 변경(`props.x = 1`)하는 것은 버그입니다 — React는 re-render하지 않으며 부모의 소유권을 깨뜨립니다. "prop을 변경"하려면 부모가 준 콜백을 호출하여 부모가 자신의 state를 업데이트하고 새 값을 아래로 전달하도록 하세요.

예시

관련 질문

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