React에서 State와 Props의 차이점

React에서 State와 Props의 차이점 완벽 정리

1. State(상태)란?

• 컴포넌트 내부에서 선언하고 관리하는 데이터입니다.
• 사용자 입력, 네트워크 응답 등 동적으로 변하는 값을 저장합니다.
• 상태가 바뀌면 해당 컴포넌트가 자동으로 리렌더링됩니다.
• setState, useState 등을 통해 값을 변경할 수 있습니다.

// 예시
const [count, setCount] = useState(0);
// setCount(1) 호출 시 컴포넌트가 다시 렌더링됨

2. Props(프로퍼티)란?

• 부모 컴포넌트가 자식 컴포넌트에 전달하는 읽기 전용 데이터입니다.
• 자식 컴포넌트는 props를 수정할 수 없고, 오직 읽기만 할 수 있습니다.
• 컴포넌트 간 데이터 전달, UI 재사용성을 높이기 위해 필수적입니다.
• 데이터 흐름은 단방향(부모 → 자식)입니다.

// 부모 컴포넌트
function Parent() {
 const [text, setText] = useState("Hello");
 return <Child message={text} />;
}

// 자식 컴포넌트
function Child({ message }) {
 return <div>{message}</div>;
}

3. State와 Props의 차이점 비교

구분	State	Props
관리 주체	컴포넌트 내부	부모 컴포넌트
변경 가능성	O (setState, useState 등으로 변경)	X (자식은 직접 변경 불가, 부모만 변경 가능)
용도	동적 데이터, 사용자 상호작용 등	컴포넌트 간 데이터 전달, 재사용성
데이터 흐름	내부에서만 관리	부모 → 자식(단방향)

TIP.
State는 컴포넌트 내부에서 변화하는 값, Props는 부모가 자식에게 전달하는 읽기 전용 값입니다.
이 두 개념을 명확히 구분하면, React의 데이터 흐름과 컴포넌트 구조를 더 쉽게 이해할 수 있습니다.