Props 소개

props 

<첫 번째 특징>

: 컴포넌트 내부에 변화하지 않는 Data에 사용된다.

<두 번째 특징>

: JSX 내부에 { this.props.propsName } 으로 접근한다.

<세 번째 특징>

: 컴포넌트를 사용할 때 , < > 괄호 안에 propsName = "value"로 작성한다.

<네 번째 특징>

: {this.props.children} 은 기본적으로 갖는 props로 <~>_______</~> 여기에 값이 들어간다.

위에 사진처럼 {this.props.name} 으로 선언을 해주면 이는 두 번째 특징에 속하며 

해당 값을 가지고 오는 방법은 세 번째 방법을 이용하시면 됩니다.

props의 value 값이 name이기 때문에 세 번째 방법은 아래와 같이 

Haams라는 클래스에서 name (props의 value)가 "seongho" 라고 정의를 내려 주는 

것입니다.

{this.props.children}은 기본적으로 props에서 제공해주는 내용이고 Haams 클래스 내에서 선언된 내용이므로 

네 번째 특징에 따라 'Haams' 태그에서 <Haams>______</Haams>

이 부분에 들어갈 내용이 값으로 출력되게 될 것입니다.

[결과]

그 외 props 의 특징 

1. 기본 값 설정하기 

Class이름.defaultProps = {

key(props의 value) : (내용 == 값)

}

<h2> 태그에 주목하자 

{this.props.firstValue} 로 props의 값을 firstValue로 설정한 상황이다. 

또 이 선언은 Haams 클래스 내부에서 선언된 내용이다.

아래 그림 처럼 Haams.defaultProps 태그로 Haams클래스 내에 props의 기본 값을

설정해준다. 

firstValue (props의 value값) : "기본값입니다. "(firstValue에 들어갈 값) 

이렇게 설정해 주게 되면 아래와 같은 결과가 나오게 됩니다.

2. Type 검증하기 

클래스이름.propTypes = {

key(props의 value) : React.PropTypes.______ 

}

https://reactjs.org/docs/components-and-props.html

PropTypes에 관한 내용으로 다양한 종류가 많습니다. 

다음과 같이 타입을 정의할 수 있습니다. 종류는 다양하며 위에 링크를 확인해주시기 바랍니다.

본 타입은 string , number , any 등 여러가지가 있으며 조건문으로도 활용 가능합니다. Type을 string으로 했는데 number가 적혀져 있으면 console창에서 에러가 나게 됩니다. 

본 propTypes 코드는 협업에 많이 사용되며 , 없어도 에러는 나지 않지만 작성해주는 습관을 드리는 것이 중요합니다.

https://github.com/Haamseongho/React_Study/tree/haams/props

추가 내용은 다음 링크에 있습니다. 감사합니다!