Props

App.js

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

function App() {
  return (
    <div>
      <Hello name='react' color="red"/>
    // Hello 컴퍼넌트에 값을 전달해줄때 다음과 같이 값을 적고 
    // Hello.js에 파라미터로 props를 넘겨준다.
    </div>
  );
}

export default App;

Hello.js

import React from 'react';

function Hello(props) {
    console.log(props);
  // props를 콘솔로 보면 객체로 받아오는 것을 볼 수 있다.
  // 객체의 값을 불러올때는 props.name을 사용한다.
  // 중괄호를 사용해 불러온다.
  // color도 변경할 수 있다.
    return <div style={{
                       color: props.color
                      }}>안녕하세요 {props.name}</div>;
}

export default Hello;

• 구조분해를 통해 코드를 정리할 수 있다.

import React from 'react';

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

export default Hello;

defaultProps (기본값)

import React from 'react';

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

Hello.defaultProps = {
    name: '이름없음'
};

export default Hello;