리액트 컴포넌트 사용시 속성 넘겨주기

리액트 컴포넌트를 만들어 둘 때 파라미터 부분이 있는 것을 볼 수 있다. 그럼 리액트 컴포넌트를 가져올 때 어떻게 하면 속성을 넘기고 그 속성을 사용할 수 있을까?

 

1. 사용하는 부분에서 <Hello name="bob" color="red" />와 같이 속성=값 형태로 넘겨준다.

 

2. 컴포넌트 부분에서 인자 부분에서 props으로 하여 속성 값 name, color로 사용

function Hello (props){

  const style = { color: props.color};

  return ( 

     <div style={style}>

        name: {props.name}

     </div>

  )

}

 

3. 속성 기본 값이 필요한 경우 다음과 같이 사용

Hello.defaultProps = {

  name: 'peter'

}