React Props 완전 정복 — 개념, 구조분해, 실습 예제로 쉽게 이해하기

Props란?

Props는 Properties(속성) 의 줄임말로 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하기 위한 수단입니다.

React에서 컴포넌트는 재사용이 가능해야 합니다. 그런데 같은 컴포넌트를 상황에 따라 다르게 보여주고 싶을 때 외부에서 값을 주입해야 합니다.
→ 이 역할이 Props입니다.

Props : 외부에서 받아오는 값 (읽기 전용 데이터)

 

---

Props 사용 예시

1) 부모에서 자식에게 값 전달

function App() {
  return <Hello name="리링" />;
}

• <Hello name="리링" /> : name이라는 이름으로 데이터 전달

2) 자식에서 props 받기

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

• {props.name} :  전달 받은 값 사용
• props는 읽기 전용으로 자식 컴포넌트 안에서 직접 변경 불가합니다.

---

Props가 중요한 이유 !!

1. 컴포넌트 재사용성 극대화

<Hello name="리링" />
<Hello name="삐링" />
<Hello name="히링" />

 

같은 컴포넌트 3번 사용하지만 다른 UI 결과를 낼 수 있습니다..

 

2. 컴포넌트 간 데이터 흐름 방향을 명확하게 한다
단방향 데이터 흐름 :  부모 → 자식 단방향 흐름

 

Props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법이며, 자식은 읽기만 가능하고 직접 수정할 수 없습니다.

 

 

---

Props 구조분해 (Destructuring)

위에서는 이렇게 props를 사용했습니다.

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

하지만 props 안에 여러 개의 데이터가 있을 경우 매번 props.xxx 로 접근하면 코드 가독성이 떨어집니다.

💡 그래서 React에서는 구조분해 문법을 많이 사용합니다.

 

부모 컴포넌트 : 

function App() {
  return <Hello name="리링" age={26} />;
}

 

자식 컴포넌트 :

function Hello({ name, age }) {
  return (
    <h1>
      {name}님은 {age}살입니다.
    </h1>
  );
}

 

• { name, age } :  props 객체 안의 name, age 값을 바로 변수로 추출
• name="리링" :  문자열 props 전달
• age={26} : 숫자는 {} 로 감싸서 전달

→ 이렇게 구조분해를 쓰면 코드가 더 깔끔해집니다.

---

Props 실습 예제 (카드 컴포넌트)

 

📁Card.jsx

function Card({ title, content }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <p>{content}</p>
    </div>
  );
}

export default Card;

 

📁App.jsx

import Card from "./Card";

function App() {
  return (
    <div>
      <Card title="React 공부하기" content="오늘은 Props 개념을 배웠다" />
      <Card title="운동 하기" content="30분 근력운동 필수" />
      <Card title="블로그 정리" content="학습 내용 기록하기" />
    </div>
  );
}

export default App;

 

 

결과 설명 : 컴포넌트 역할

Card.jsx	UI 템플릿 역할(틀)
App.jsx	서로 다른 props 값을 Card에게 전달, 재사용

→ 같은 Card 컴포넌트를 3번 사용해도 props 값에 따라 다른 UI가 보여진다.