NodeJS 와 병행하면서 진행하는 ReactJS .. 일도 그만뒀으니 시간도 많고 본격적인 자기개발의 시간을 가져볼까 합니다.
이 게시판에는 ReactJS 용어 혹은 문법의 정의를 정리해 둘까 합니다.
제 스스로 공부하고 머릿속에있는 기억을 이곳에 저장하고 틈틈히 확인하려고 작성하는것입니다. 복습 개념으로.. 틈틈이
머리가 나쁘기 때문에 저는 항상 기록을 하고 찾아봐야합니다..
props 란
props는 프로퍼티(properties - 재산, 특성, 소유)의 줄임말로 사용자가 컴포넌트에 전달해서 보관-보전 하길 원하는 데이터입니다.
Props는 외부에서 전달만하는 값이므로 해당 컴포넌트가 자체적으로 관리하는 값이 아니기에 내부에서 변경할 수 없습니다.
props는 부모 컴포넌트로부터 상속받은 속성으로 부모 컴포넌트가 변경되면 상속받은 props 도 같이 변경됩니다.
props는 기본값이 문자열이기 때문에 다른 자료형(함수 or 변수)을 전달하려면 { }(브라켓) 안에 작성해야 합니다.
PropTypes
ReactJS 버전 업데이트로 npm install prop-types 를 설치해야 사용 가능합니다.
컴포넌트의 Prop은 외부로부터 값을 지정받기 때문에 PropTypes의 검증이 필요합니다.
그리고 다른 개발자가 보았을때 Prop의 자료형을 쉽게 파악할 수 있게 도와주는 것이 PropTypes 입니다.
PropTypes을 지정하는 것으로 컴포넌트의 인터페이스를 조금 더 명확하게 표현할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | React.PropTypes.array // 배열 React.PropTypes.bool.isRequired // Boolean, 필수 React.PropTypes.func // 함수 React.PropTypes.number // 정수 React.PropTypes.object // 객체 React.PropTypes.string // 문자열 React.PropTypes.node // Render가 가능한 객체 React.PropTypes.element // React Element React.PropTypes.instanceOf(XXX) // XXX의 instance React.PropTypes.oneOf(['foo', 'bar']) // foo 또는 bar React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.array]) // 문자열 또는 배열 React.PropTypes.arrayOf(React.PropTypes.string) // 문자열을 원소로 가지는 배열 React.PropTypes.objectOf(React.PropTypes.string) // 문자열을 값으로 가지는 객체 React.PropTypes.shape({ // 지정된 형식을 충족하는지 color: React.PropTypes.string, fontSize: React.PropTypes.number }); React.PropTypes.any.isRequired // 어떤 타입이든 가능하지만 필수 // 커스텀 제약도 정의 가능 customPropType: function(props, propName, componentName) { if (!/^[0-9]/.test(props[propName])) { return new Error('Validation failed!'); } } | cs |