[React] Props

Props란?

Props는 properties의 약자로, React에서 지원하는 JavaScript 객체이다.

컴포넌트를 사용할 때, props를 활용하여 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달할 수 있다.

 

사용

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

위 코드를 살펴보면

1. App 컴포넌트에서 Welcome 컴포넌트를 세 번 호출한다.

2. props의 name으로 각각 "Sara", "Cahal", "Edite"이라는 정보를 전달한다.

3. Welcome 컴포넌트에서는 매개변수로 받은 props에서 props.name의 정보를 가져와 아래와 같이 출력된다.