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

Question

Accepted Answer

**Props**는 부모가 컴포넌트에 **전달하는** 입력값입니다(자식 입장에서는 읽기 전용). **State**는 컴포넌트가 **내부적으로 소유하고 관리하는** 데이터입니다(변경 가능). 구분점은 이렇습니다: props는 외부에서 오며 컴포넌트 내부에서 변하지 않고, state는 내부적이며 변경 가능합니다. ## Props — 전달받음, 읽기 전용 ```jsx function Greeting({ name }) { // `name`은 부모로부터 온 prop return

Hello, {name}

; // name = "Bob"; // ❌ 자식은 자신의 props를 수정하면 안 됨 } // 부모가 prop을 공급함 ``` Props는 부모에서 자식으로 **아래로** 흐릅니다. 자식은 이를 읽지만 변경할 수 없습니다. prop의 값을 바꾸려면 부모가 새로운 값을 전달해야 합니다. ## State — 내부적으로 소유, 변경 가능 ```jsx function Counter() { const [count, setCount] = useState(0); // `count`는 이 컴포넌트 자신의 state return ; // 컴포넌트가 setCount로 자신의 state를 갱신함 } ``` State는 컴포넌트 *내부*에서 생성되고 제어됩니다. 컴포넌트가 이를 변경하며(`setCount`/`setState`를 통해), 변경하면 리렌더링이 유발됩니다. ## 나란히 비교 ```text Props State 출처 부모로부터 전달됨 컴포넌트 안에서 생성됨 변경 가능? 읽기 전용(자식 입장) 가능(setter를 통해) 누가 제어? 부모 컴포넌트 자신 렌더링 유발 부모가 변경할 때 컴포넌트가 갱신할 때 목적 데이터 구성/전달 변하는 내부 데이터 추적 ``` ## 함께 동작함 ```jsx function Parent() { const [user, setUser] = useState({ name: "Ann" }); // 부모의 STATE return ; // PROP으로 아래로 전달 } ``` 한 컴포넌트의 **state**가 자식에게 **prop**으로 전달되는 경우가 많습니다. state를 끌어올리고 아래로 전달하는 것이 바로 이 패턴입니다. 부모가 state를 소유하고 자식이 props로 받습니다. ## 왜 중요한가 state와 props의 구분은 컴포넌트 기반 프레임워크의 근본입니다. 이는 데이터의 소유권과 흐름을 정의합니다. props는 외부의 읽기 전용 구성(데이터 아래로)이고, state는 컴포넌트가 관리하는 내부의 변경 가능한 데이터입니다. 둘을 혼동하는 것 — props를 변경하거나, props를 state로 복제하는 것 — 은 전형적인 버그를 일으킵니다. 데이터가 props로 아래로 흐르고 각 컴포넌트가 자신의 state를 소유한다는 점을 이해하는 것이 React/Vue/Angular 컴포넌트 설계의 기반입니다.