[React.js] props

props

 

* 컴포넌트 내부의 변하지 않는 데이터를 처리할 때 사용

* props가 보여지는 부분에 { this.props.propsName } 을 넣고,

컴포넌트를 나중에 렌더링 하게 될 때 HTML 태그의 값을 전달해 주듯이 propsName="value"로 작성

* this.props.children은 모든 컴포넌트가 기본적으로 갖고있는 props로서,

<Cpnt> 여기에 있는 값이 들어감 </Cpnt>

 

 

See the Pen 20190420_props by KANGDASEUL (@KANGDASEUL) on CodePen.

 

props의 기본 값 설정

 

value props의 기본 값을 0으로 설정함

기본 값을 설정할 때에는 컴포넌트 선언이 끝난 후,  defaultProps 객체를 설정하면 됨

 

 

Type 검증

 

이 기능을 통하여 특정 props 값이 특정 type이 아니거나,

필수 props인데 입력하지 않았을 경우,

개발자 콘솔에서 경고를 띄우게 할 수 있음

 

Type를 검증할 땐 컴포넌트 선언이 끝난 후, propTypes를 설정

 

첫번째 값(value)의 Type은 문자열

두번째 값(secondValue)은 숫자

세번째 값(thirdValue)은 어떤 type이던 필수로 입력이 되도록 설정

 

 

 

See the Pen 20190420_props by KANGDASEUL (@KANGDASEUL) on CodePen.

PropTypes는 React v15.5부터 따로 prop-type 라이브러리로 분리되어있다.

 

위 실습에서는 codepen setting을 

 

https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js

 

에서

https://npmcdn.com/react@15.3.0/dist/react.js
https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js

 

로 변경하여 실습을 진행하였다.

 

 

 

 

 

(참조) 스크립트 파일을 불러와서 해결하는 방법

PropTypes는 이제 react 에서 모듈이 따로 분리되어 있네요. - 인프런

 

 

 

 

'[InFlearn] React & Express를 이용한 웹 어플리케이션 개발하기' 강의를 참고하였습니다.