Prop[properties : 속성]

Prop이란?

컴포넌트에 전달되는 데이터입니다.

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되며,

자식 컴포넌트는 props를 통해 부모가 전달한 데이터를 받아 활용할 수 있다.

 

prop는 변경할 수 없는 불변 데이터를 의미

 

예시

// Greeting.jsx
import React from 'react';

// 자식 컴포넌트
export default function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Greeting.jsx 라는 자식 컴포넌트

 

// App.jsx
import React from 'react';
import Greeting from './components/Greeting.jsx'

// 부모 컴포넌트
function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

export default App;

App.jsx 라는 부모 컴포넌트

 

App.jsx에서의 prop 즉 속성은 name이다.

Greeting 컴포넌트에 각각 name 속성(prop)에 Alice와 Bob 으로 설정

 

Greeting.jsx 에서 return = 반환되는 값이므로

return <h1>Hello, {props.name}!</h1>;

 

{props.name}이 부분 안에는 각 컴포넌트마다 속성으로 지정한 Alice와 Bob

 

각각 부모 자식 컴포넌트에는 

      <Greeting name="Alice" />

→ <h1>Hello, {Alice}!</h1>
      <Greeting name="Bob" />

→ <h1>Hello, {Bob}!</h1>

이렇게 적용되며, 각 컴포넌트는 h1태그로 

Hello, Alice!

Hello, Bob!

라는 문구가 출력된다.

 

이처럼 prop는 부모에서 자식으로 데이터를 전달하고 주고받는 중요한 역할을 한다.