[ReactJS] props

Props

:Component 내부의 Immutable Data(변화하지 않는 데이터)를 처리할 때 사용되는 Props

props

- 컴포넌트 내부의 데이터를 처리할 때 사용된다.

- JSX 내부의 { this.props.propsName } 이 있을 때, 컴포넌트를 렌더링할 때 propsName = "value" 이런 식으로 전달하면 된다.

- this.props.childeren은 기본적으로 갖고있는 props로써, <Cpnt>여기에 있는 값이 들어간다</Cpnt>

props 설정

(줄 5, 줄 15) Codelab의 props 값 설정해준다. name을 "jessie"로 설정했다.

Children Props

(줄 6, 줄 15) Children props는 <Codelab>와 </Codelab>사이에 있는 값 "Hi Children!!!"이 전달된다.

하위 Component로 props 전달

이번에는 App 컴포넌트의 props를 하위 컴포넌트인 Codelab의 props로 전달하는 법을 알아보자.

(줄 15) text 대신에 또 다른 props를 설정해주면 된다.

"줄 20"에서 설정한 값이 "줄 15"로 올라오고 여기서 받은 값이 "줄 5~6"으로 오는 것이다. 이러한 구조가 앞으로도 자주 사용될 것이니 잘 기억해두자.

props 기본값 설정

컴포넌트 설정이 끝난 후, defaultProps 객체를 설정하면 된다.

아래의 예제는 value props의 기본값을 0으로 설정하고 있다.

Props Type 검증

이 기능을 통하여 특정 props 값이 특정 type이 아니거나 필수 props인데 입력하지 않았을 경우 경고를 띄울 수 있다.

Type을 검증할 때는 Component 선언이 끝난 후, propTypes를 설정하면 된다.

문자열로 설정하는 방법 : React.PropTypes.string

숫자로 설정하는 방법 : React.PropTypes.number

어떤 타입이든 필수로 입력이 되도록 설정 : React.PropTypes.any.isRequired

defaultProps, propTypes 적용 예제

(줄 13~16) propTypes를 통해 name은 문자열로 설정하고 number는 숫자인데 꼭 입력하도록 설정했다.

(줄 18~20) defaultProps를 통해 name의 기본값을 'Unknown'으로 설정했다.

(줄 25, 줄 30) number를 꼭 입력하도록 했기 때문에, number={this.props.number}, number={5}를 입력해준다.

입력하지 않을 경우, Console창을 확인해보면 에러가 뜨는 것을 확인할 수 있다.

propTypes를 지정하는건 필수가 아니다. 없어도 문제가 없다.

우리가 만든 컴포넌트가 제대로 사용되기 위해서, 유지보수를 위해서 필요한 것이다.

propTypes를 통해 해당 component가 뭘 필요로하고 어떤 타입이어야 하는지 쉽게 알 수 있다.