[React] props

props

컴포넌트 속성을 설정할 때 사용하는 요소이며 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다.
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정한다.

예제로 상위 컴포넌트 APP.js, 하위 컴포넌트 MyComponent.js를 사용할 것이다.

JSX 내부에서 props 렌더링

props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있다.
props를 렌더링할 때 JSX 내부에서 {}기호로 감싸주면 된다.

컴포넌트를 사용할 때 props 값 지정하기

상위 컴포넌트인 APP.js에서 MyComponent의 props값을 지정한다.

props 기본 값 설정 : defaultProps

따로 props 값을 지정하지 않았을 때 보여줄 기본값을 설정 한다.

태그 사이의 내용을 보여주는 : children

리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props이다.

비구조화 할당 문법을 통해 props 내부 값 추출하기

props 값을 조회 할 때마다 props 이라는 키워드를 앞에 붙여주곤 했는데 이러한 작업을 더 편하게 하기 위해 ES6의 비구조화 할당 문법을 사용한다.

propTypes를 통한 props 검증

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propTypes를 사용한다.
propTypes를 지정하는 방법은 defaultProp을 설정하는 것과 비슷하다.
우선 propTypes를 사용하려면 코드 상단에 import 구문을 사용하여 불러와야 한다.

isRequired를 사용하여 필수 propTypes 설정

isRequired는 propTypes를 지정하지 않았을 때 경고 메시지를 띄어준다.

클래스형 컴포넌트에서 props 사용하기

클래스형 컴포넌트에서 props를 사용할 때는 render 함수에서 this.props를 조회하면 된다.

➕ 클래스형 컴포넌트에서 defaultProps와 propTypes를 설정할 때 class 내부에서 지정하는 방법