React props 1

props는 상위 컴포넌트(component)에서 하위컴포넌트로 데이터를 넘겨줄때 사용한다.

 

App.js

// props라는 데이터를 넘겨준다.

function App(props) {
  return (
    <Wrapper>
    
      // name이라는 값과 color값을 전달해준다.
      <Hello name="react" color="red" />
      
    </Wrapper>
  );
}

 

Hello.js

import React from 'react';

// props에서 원하는 속성만 객체로 받을수 있다.
function Hello({ color, name }) {
   return <div style={{color: color}}>안녕하세요 {name}!</div>  
}

export default Hello;

import React from 'react';

// 아니면 아래와 같이 props속성을 통채로 받아서 원하는 정보를 꺼내쓸수도 있다.
function Hello(props) {
   return <div style={{color: props.color}}>안녕하세요 {props.name}!</div>  
}

export default Hello;

import React from 'react';

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

// defalut값도 지정가능
Hello.defaultProps = {
   name: '이름 없음'
};

export default Hello;