[React] Props 사용하여 데이터 주고받기

목표

props의 개념을 정확하게 이해하고 컴포넌트에서 각각의 개체로 활용해보겠습니다.

---

 

새로운 컴포넌트 작성

새로운 컴포넌트를 작성하고, 최상위 컴포넌트 에서 props값을 전달할 예정입니다.

먼저 App.js에서 props를 받을 새로운 컴포넌트를 만들어주었습니다.

//Prt1.js

import React from 'react';

function Prt1 (props) {
	return(
		<h1>{props.name}, Welcome!</h1>
	)
}

export default Prt1;

※ React는 소문자로 시작하는 컴포넌트를 DOM태그로 처리하기 때문에, 컴포넌트의 이름은 항상 대문자로 시작해야 합니다.

Prt1.js 라는 파일을 만들고 return 값에 {이름}, Welcome! 이 출력되도록 설정하였습니다.

 

결과물

현재 {props.name} 부분이 비어있는것을 확인할 수 있습니다.

이 부분은 상위 컴포넌트인 App.js에서 내려받을 것입니다.

- App.js 에서 불러오기

//App.js

import './App.css';
import Prt1 from './component/Prt1';

function App() {
  return (
    <div className="App">
      <Prt1 name="young" />
    </div>
  );
}

export default App;

먼저 App.js 에서 만들어 놓은 Prt1.js를 호출해 주고 name 값에 이름을 작성하여 주었습니다.

상위 컴포넌트에서 props.name 을 내려보내면 하위 컴포넌트가 그 값을 받는 방식이었습니다.

결과

결과물