React의 컴포넌트와 Prop 개념 잡기

 

React의 컴포넌트와 Prop을 사용해서 사용자 이름을 받아서 화면에 출력하는 간단한 함수형 컴포넌트 예제를 만들어 보자

 

1. 파일구조

/src
  App.js
  HelloUser.js

 

2. HelloUwer.js

import React from 'react';

function HelloUser(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>Welcome to the React world!</p>
    </div>
  );
}

export default HelloUser;

 

부모로 부터 props를 받아서 props.name을 출력한다.

 

3. App.js

import React from 'react';
import HelloUser from './HelloUser';

function App() {
  return (
    <div>
      <HelloUser name="Alice" />
      <HelloUser name="Bob" />
      <HelloUser name="Charlie" />
    </div>
  );
}

export default App;

 

App은 React의 루트 컴포넌트 이다.

HelloUser 컴포넌트를 3번 호출하고 각기 다른 name값을 전달하는데 이 때 전달되는 속성값이 Props이다.

 

결과

Hello, Alice!
Welcome to the React world!

Hello, Bob!
Welcome to the React world!

Hello, Charlie!
Welcome to the React world!