컴포넌트에 값 전달하기

1. 값을 주고 받는 것

props

시작은 역시 hello 로 진행.

App.js

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

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

페이지 상단에서 Hello 컴포넌트를 import 하고
하단 function 블럭에서 해당 컴포넌트를 리턴하고 있음.
당연히 정확한 경로에 다음 컴포넌트 작성 필요.

Hello.js

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

App.js 에서 Hello 컴포넌트를 호출할 때 name=react 를 정의하였으므로, 해당 값을 컴포넌트에서 사용할 수 있게 돕는 것이
바로 props 임.

여러개를 해야하는데...

App.js

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

function App() {
  return (
    <Hello name="react" color="red"/>
  );
}

export default App;

컴포넌트에 호출 시에 color 값을 추가 한다면

Hello.js

import React from 'react';

function Hello(props) {
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}

export default Hello;

이렇게 색정보도 받아서 적용하면 됨.
여기서 props.color, props.name 이렇게 작성하는 것 보다는
비구조화 할당을 이용해서 { color, name } = props 이므로
다음과 같이 하면됨.

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

export default Hello;