React 기초 05 · props
props - 부모가 건네는 쪽지
부모가 자식에게 데이터를 내려주는 한 방향 통로. 자식은 읽기만 하고, 부모 값이 바뀌면 자식 화면이 따라 바뀌어요.
1
먼저 비유로
부모가 건네는 쪽지예요
부모 컴포넌트가 자식에게 쪽지를 건네요. 쪽지엔 "이름: 지민", "색: 보라" 같은 게 적혀 있어요. 이 쪽지가 props예요. 자식은 쪽지를 읽어서 화면을 그릴 뿐, 쪽지 내용을 자기 맘대로 고쳐 쓸 순 없어요. 내용을 바꾸려면 부모가 새 쪽지를 줘야 해요.
그래서 데이터는 늘 부모 → 자식 한 방향으로 흘러요. 부모가 가진 값이 바뀌면, 자식은 새 쪽지를 받아 화면을 다시 그려요.
2
직접 해보기
부모를 바꾸면 자식이 따라와요
위 부모 패널에서 이름·색·크기를 바꿔보세요. 아래 자식 카드가 곧바로 따라 바뀌어요. 그 아래 점선 카드는 같은 컴포넌트에 다른 쪽지를 준 거예요.
직접 만져보세요
부모 컴포넌트 (값을 가짐)
색
18px
props로 전달 (한 방향)
자식 컴포넌트
안녕하세요, 지민님 👋
같은 GreetingCard에 다른 props를 주면 (재사용)
자식 컴포넌트
안녕하세요, 민준님 👋
자식은 받은 props를 읽기만 해요. 자식이 자기 이름을 직접 바꿀 순 없고, 위 부모의 입력을 바꿔야 자식 화면이 따라 바뀌어요. 이게 한 방향(부모 → 자식) 흐름이에요.
부모 입력을 바꾸면 자식 카드가 실시간으로 바뀌어요.
핵심은 이거예요
props는 부모가 자식에게 주는 읽기 전용 값이에요. 자식은 못 바꾸고, 바꾸려면 부모가 자기 state를 바꿔서 다시 내려줘야 해요.
3
흐름으로 보기
값이 흘러가는 순서
- 1부모가 값을 state로 가지고 있어요 (예: name).
- 2부모가 자식을 그릴 때 <GreetingCard name={name} /> 처럼 props로 넘겨요.
- 3자식은 props.name을 받아 화면을 그려요. 읽기만 해요.
- 4부모가 setName으로 값을 바꾸면, 부모가 다시 그려지며 자식에게 새 props가 내려가요.
4
코드로 보기
딱 이만큼이에요
// 부모: 자기 값(state)을 자식에게 props로 내려준다function Parent() { const [name, setName] = useState("지민"); return <GreetingCard name={name} />; // name 이라는 props 전달} // 자식: props를 받아서 읽기만 한다 (직접 못 바꿈)function GreetingCard({ name }) { return <p>안녕하세요, {name}님</p>;}5
조심하세요
처음에 꼭 헷갈리는 것
- 자식에서 props를 직접 고치기. props는 읽기 전용이에요. 자식만의 값이 필요하면 자식 안에서 useState를 따로 두세요.
- 아래에서 위로 올려보내려 하기. 자식 → 부모로 값을 "직접" 못 줘요. 대신 부모가 함수를 props로 내려주고, 자식이 그 함수를 호출해 부모에게 알려요.
- props 이름 오타. 부모가 준 이름과 자식이 받는 이름이 정확히 같아야 해요. 다르면 그 값은
undefined로 비어 보여요.