React - props를 이용하여 데이터 전달하기

리액트 props를 이용하여 데이터를 전달하여서 엘리먼트에 사용하는 방법입니다.

 

먼저 Hello라는 컴포넌트를 간단하게 만듭니다.

function Hello() {
  return <h2>Hello</h2>
}

export default Hello

위와 같이 Hello 컴포넌트를 만들고

Hello 컴포넌트를 렌더링 하게 되면

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Hello/>
);

 

Hello 글자가 나옵니다.

 

이제 Hello 컴포넌트 네임 props를 전달하여서

Hello 컴포넌트에 이름을 넣어보겠습니다.

 

function Hello(props) {
  return <h2>Hello {props.name}</h2>
}

export default Hello

만들었던 Hello 컴포넌트에 첫번째 인자에서 props를 받습니다.

해당 props 사용하고 싶은 곳에 {} 사이에 입력합니다.

 

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <div>
    <Hello name="Superman"/>
    <Hello name="Batman"/>
    <Hello name="Pororo"/>
  </div>
);

이제 위와 같이 이름을 넘기면

Hello 컴포넌트에 props를 받아서 사용할 수 있습니다.

 

props로 데이터를 전달받아서 컴포넌트에서 사용할 수 있습니다.