React에서의 데이터 전달 과정

React에서 UI를 만들 때 가장 기본이 되는 개념이 컴포넌트와 Props이다. 컴포넌트는 UI를 구성하는 독립적인 단위이며, Props는 컴포넌트 간 데이터를 전달하는 방식이다.

 

---

1. Props란 무엇인가

Props(Property) 는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 값이다. React에서는 컴포넌트마다 어떤 UI를 렌더링할지 결정하기 위해 외부에서 값을 전달할 수 있다.

부모 컴포넌트 → 자식 컴포넌트

즉, 위의 방향으로 데이터를 전달할 수 있다. 이러한 단방향 데이터 흐름은 React의 핵심 특징 중 하나다.

 

function App() {
  return <User name="슬기" age={5} />;
}

function User(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.age}</p>
    </div>
  );
}

App 컴포넌트에서 전달한 값이

name="슬기"
age={5}

이렇게 props 객체 안에 저장된다.

 

props = {
  name: "슬기",
  age: 5
}

 

 

---

 

2. 구조분해 할당으로 Props 받기

보통 React에서는 props 객체를 그대로 사용하기보다 구조분해 할당으로 많이 사용한다.

 

function User({ name, age }) {
  return (
    <div>
      <h1>{name}</h1>
      <p>{age}</p>
    </div>
  );
}

 

이 방식이 더 가독성이 좋고 코드가 간결하다.

 

---

 

3. Props 기본값 설정

props에 값이 전달되지 않았을 때 기본값을 설정할 수도 있다.

function User({ name = "Guest" }) {
  return <h1>{name}</h1>;
}

 

 

 

---

4. Spread 연산자로 Props 전달하기

객체를 그대로 props로 전달할 때 spread 연산자를 사용할 수 있다.

 

function App() {
  const user = {
    name: "슬기",
    age: 5,
  };

  return <User {...user} />;
}

위 코드는 아래와 동일하다.

<User name="슬기" age={5} />

 

 

 

---

 

5. children Props 

React에서는 컴포넌트 태그 사이에 들어간 요소들이 자동으로 props.children으로 전달된다.

예시

function App() {
  return (
    <Layout>
      <h1>Hello React</h1>
    </Layout>
  );
}

 

 

Layout 컴포넌트

 

function Layout(props) {
  return <div>{props.children}</div>;
}

 

이때 children의 값은 아래 처럼 된다.

<h1>Hello React</h1>

 

<컴포넌트>내용</컴포넌트> 형태로 작성하면 내용이 자동으로 children으로 전달된다.

---

Props 정리

• Props는 부모 → 자식 데이터 전달 방식
• React는 단방향 데이터 흐름
• Props는 읽기 전용이다
• 컴포넌트 태그 사이 내용은 props.children으로 전달된다