컴포넌트끼리 데이터 주고받는 방법, Props가 뭐예요?

React에서 컴포넌트를 막 만들기 시작하면,
이런 생각이 들 수 있어요.

"같은 버튼인데 글씨만 다르게 하고 싶은데?"
"컴포넌트 안에 정보를 어떻게 넣지?"

그럴 때 등장하는 게 바로 Props입니다!

오늘은
✅ Props가 뭔지
✅ 왜 필요한지
✅ 어떻게 쓰는지
진짜 쉽게 정리해드릴게요.

---

1️⃣ Props란 뭘까?

**Props = properties(속성)**의 줄임말이에요.

쉽게 말하면,
👉 컴포넌트에 값을 전달할 때 사용하는 방법이에요!

---

예를 들어 볼게요

jsx

복사편집

function Welcome() { return <h1>안녕하세요!</h1>; }

이 Welcome 컴포넌트를 여러 번 쓰고 싶은데,
각각 이름만 다르게 하고 싶어요.

이렇게 바꾸면?

jsx

복사편집

function Welcome(props) { return <h1>안녕하세요, {props.name}님!</h1>; }

이제 이름을 바꿔서 부를 수 있어요!

jsx

복사편집

function App() { return ( <div> <Welcome name="리아" /> <Welcome name="철수" /> </div> ); }

결과는 이렇게 나와요:

복사편집

안녕하세요, 리아님! 안녕하세요, 철수님!

📌 즉, Props는 컴포넌트에 값을 넘겨주는 방법이에요!
마치 함수에 인자(argument)를 전달하는 것과 같아요.

---

2️⃣ Props는 이렇게 생겼어요

jsx

복사편집

function MyComponent(props) { return <p>{props.text}</p>; }

컴포넌트에서 props는 객체처럼 사용해요.
props.text, props.color 이런 식으로 꺼내 쓰면 됩니다.

---

3️⃣ 구조 분해로 더 깔끔하게 쓰기

jsx

복사편집

function MyComponent({ text }) { return <p>{text}</p>; }

이렇게 구조 분해를 하면 props.text 대신 text만 써도 돼요.
더 간결하고 보기 좋죠?

---

4️⃣ 여러 개의 Props 전달하기

jsx

복사편집

function Profile({ name, age }) { return ( <div> <p>이름: {name}</p> <p>나이: {age}</p> </div> ); } function App() { return <Profile name="리아" age={25} />; }

숫자, 문자열, 불린 등 다양한 값을 props로 넘길 수 있어요.

---

5️⃣ Props는 읽기 전용이에요!

React에서는 Props를 수정하면 안 돼요.

jsx

복사편집

// 이런 건 ❌ props.name = "바꾸면 안 돼요!";

👉 Props는 부모 컴포넌트가 자식에게 일방적으로 전달하는 값이에요.
변경이 필요하다면 state를 사용해야 해요 (이건 다음 편에서!)

---

✏️ 한 줄 정리

Props는 React에서 컴포넌트끼리 데이터를 주고받는 기본 도구입니다.
함수에 값을 넣듯이, 컴포넌트에도 값을 넣어줄 수 있어요!