React.js - Props

 

 

리액트에서 Component 만드는 것 보다 더 이해가 안가고 도저히 블로그를 보고 책을 찾아봐도 초반에는 이해가 안되서 따로 정리를 해보려고 한다. (내가 이해 부족인듯...)

아마 지금 이 글을 쓰면서도 내가 이해한 것과 타인이 봤을 때 다른 점이 있을 수도 있다고 생각한다.

React에서 정말 중요한 Props를 최대한 쉽게 풀어보려고 글을 써본다.

 

시작하기 전에 준비해야 할 것.

• App.js(이건 굳이 생성안하셔도 있을거라 믿고...)
• TestComponent.js 생성

 

 

Props(Properties의 줄임말)

 

 

1. 부모에서 자식으로에게만 전달

 

 : 이 말이 무엇이냐면, 보통 예제로 실습하는 App.js(부모)에서 TestComponent라는 자식 컴포넌트을 하나 만들고 값을 App.js에서만 값을 전달 할 수 있다는 것이다. 

 

- App.js -

 

 

- TestComponent.js -

 

 

 

 

App.js에서 TestComponent를 삽입했을 때의 예를 들면. TestComponent의 name 속성에 "안녕하세요"라는 값을 넣으면

TestComponent.js에서 정적인 값을 {this.props.name}으로 받을 수 있다는 것이다. 말 그대로 부모에서 -> 자식으로에게만 전달 된다.

 

 

2. defaultProps

 

defaultProps는 부모 컴포넌트에서 실수로 자식 컴포넌트에 속성을 부여하지 않았을 때, 또는 자식 컴포넌트에서 기본 Props를 정할 때 사용한다. Props의 기본 속성인 부모->자식 순이기에 이것도 마찬가지로 부모 컴포넌트에서 생성한다. 

 

 

예) App.js(부모)에서 TestComponent(자식)이 있을 때 TestComponent의 defaultProps를 지정 할 때는 

 

 

 

이런식으로 부모.defaultProps의 JSON 객체 형식으로 만들어 기본 Props를 설정 할 수 있다.

 

참고로 defaultProps가 "반갑습니다"로 설정되어 있고, 컴포넌트에서 값을 아까처럼 "안녕하세요"로 지정해 줬다면 defaultProps(반갑습니다)는 무시되고 컴포넌트에 설정된 Props(안녕하세요)가 우선된다. 

 

 

3. PropType

 

PropsType은 Props 속성의 "형식 검증"을 할 수 있다.

 

먼저 터미널에서 npm install --save prop-types를 입력해 모듈을 설치하자.

 

그리고 컴포넌트.js에 import PropTypes from 'props-types'를 입력하자. 

 

 

class명.propTypes로 JSON객체를 만들고 검증하고 싶은 prop(name) : PropTypes.형식으로 검증을 한다,

 

위 사진의 검증 방식은 name의 props 타입이 number고 꼭 그래야하는지의 대한 검증 설정이다.(isRequired는 선택사항이다.)

 

만약 name의 타입이 number가 아닐 경우에는 웹의 F12(디버깅 툴)을 눌러 디버깅 창의 콘솔을 확인 해 보면.

 

 

TestComponent의 타입이 number가 아니라 string이라는 에러 메세지가 나온다.

 

꼭 검증을 하라는 건 아니지만 큰 프로젝트를 할 경우에는 필요할 것 같다.