⭐ 3편 — 초보자 80%가 헷갈리는 Props vs State: 완벽하게 이해하는 쉬운 설명

⭐ 3편 — 초보자 80%가 헷갈리는 Props vs State: 완벽하게 이해하는 쉬운 설명

리액트를 조금만 해보면 반드시 만나는 개념이 바로 props와 state입니다.
두 개념 모두 “데이터를 다루는 방법”이라는 점은 같지만
성격이 완전히 다르기 때문에 처음에는 헷갈릴 수밖에 없습니다.
저도 리액트 초기에 props와 state를 제대로 이해하지 못해
데이터를 어디에 둬야 할지 고민했고, 그 때문에 컴포넌트 구조도 계속 흔들렸습니다.
이번 글에서는 그런 시행착오를 겪지 않도록 가장 직관적인 방식으로 설명해드릴게요.

✅ props와 state의 핵심 차이 1줄 요약

✔ props: 부모가 자식에게 주는 값 (읽기 전용)
✔ state: 컴포넌트 내부에서 스스로 관리하는 값 (변경 가능)
이 두 줄만 이해해도 절반은 잡고 들어가는 겁니다.

✅ props란 무엇인가?

props는 외부에서 컴포넌트로 전달되는 데이터입니다.
부모 → 자식으로 흐르는 단방향 구조를 가집니다.
특징
읽기 전용 (수정 불가)
부모가 값을 바꾸면 자식도 자동으로 업데이트
UI를 유연하게 바꾸는 데 매우 중요
간단 예제
function Greeting({ name }) {
return <h1>{name}님, 안녕하세요!</h1>;
}
<Greeting name="유경상" />
Greeting 컴포넌트는 name이 무엇인지 전혀 몰랐지만
부모가 값을 넣어주면 그 값을 화면에 표시할 수 있게 됩니다.
이게 바로 컴포넌트 재사용성의 핵심입니다.

✅ state란 무엇인가?

state는 컴포넌트 스스로 가지고 있는 내부 데이터입니다.
사용자가 입력을 바꾸거나 버튼을 누르는 것처럼,
컴포넌트 안에서 값이 변해야 하는 상황에 쓰입니다.
특징
컴포넌트 안에서 직접 관리
값이 바뀌면 해당 컴포넌트가 리렌더링됨
시간에 따라 달라지는 값을 다룰 때 핵심
기본 예제
const [count, setCount] = useState(0);
버튼을 눌러 숫자가 증가하는 예제는 모두 state로 작동합니다.

✅ props vs state: 차이를 표로 이해하기

구분 props state
데이터 출처 부모 컴포넌트 자신(컴포넌트 내부)
변경 가능 여부 ❌ 없음 ✔ 가능
역할 UI를 외부 값에 따라 조정 내부에서 변화하는 값 관리
대표 사용 예 사용자 이름 표시 버튼 카운터, 폼 입력값
이 표로 보면 두 개념의 성격이 완전히 다르다는 것을 바로 이해할 수 있어요.

✅ 실전 예제: props와 state가 함께 사용되는 구조

아래는 실무에도 자주 나오는 구조입니다.
✔ 부모에서 state를 관리하고
✔ 자식에게 props로 전달하는 패턴
초보자들이 처음 어려워하는 부분이 바로 이 구조입니다.
예제
function Parent() {
const [value, setValue] = useState("");
return (
<div>
<ChildInput value={value} onChange={setValue} />
<DisplayText value={value} />
</div>
);
}
function ChildInput({ value, onChange }) {
return (
<input
value={value}
onChange={e => onChange(e.target.value)}
placeholder="입력해보세요"
/>
);
}
function DisplayText({ value }) {
return <p>현재 입력값: {value}</p>;
}
동작 흐름
Parent가 state를 관리한다.
입력창(ChildInput)은 value와 onChange를 props로 받는다.
입력이 바뀌면 부모의 state가 업데이트된다.
부모가 바뀌면서 DisplayText도 자동으로 업데이트된다.
이 구조는 실무에서 컨트롤드 컴포넌트라고 많이 부릅니다.

✅ 초보자가 자주 하는 실수 3가지

❌ 1) props를 직접 변경하려고 함
props.value = "변경"; // 절대 안 됨
props는 읽기 전용입니다.
❌ 2) 필요 없는 곳에 state를 너무 많이 만듦
state가 많아질수록 리렌더링이 많아져 성능이 떨어집니다.
❌ 3) 부모와 자식의 책임 구분을 제대로 못함
state는 그 값을 필요로 하는 가장 가까운 부모가 관리해야 합니다.
너무 아래에서 관리하면 구조가 꼬입니다.

✨ 마무리: props와 state의 차이를 이해하면 구조가 보인다

props와 state의 차이를 정확하게 이해하면
리액트로 화면을 만들 때 데이터 흐름이 매우 명확해지고
컴포넌트 설계가 훨씬 쉬워집니다.
다음 글에서는 리액트에서 가장 중요한 훅(Hook) — useState, useEffect의 실전 사용법을 깊게 파고들어 정리해드릴게요.
초보자들이 실수하는 부분도 함께 알려드릴게요.