리액트 Props

Props

props는 속성을 나타내는 데이터로, 컴포넌트에서 사용할 데이터 중 변동되지 않는 데이터를 다룰 때 사용됩니다.

props는 읽기전용이므로, 함수 컴포넌트나 클래스 컴포넌트가 props를 수정해서는 안됩니다.

다음은 props를 사용한 예입니다.

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

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

1. 엘리먼트로 ReactDOM.renser()를 호출합니다.
2. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출한다.
3. props.name을 사용하여, Welcome은 Hello, Sara를 반환한다.

*컴포넌트는 항상 대문자로 시작

컴포넌트는 자신의 출력에 다른 여러개의 컴포넌트를 사용할 수 있습니다.

위의 예시를 확장하여 Welcome 컴포넌트를 여러번 호출하는 App이라는 컴포넌트를 추가합니다.

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

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

ReactDOM.render(
  <App />,
  document.getElementById('root')
);