props
properties. 컴포넌트의 속성을 설정할 때 사용하는 요소
props 렌더링
MyComponent.js
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
export default MyComponent;MyComponent 컴포넌트에서 name이라는 props를 렌더링하도록 설정했다.
props 값 지정하기
App.js
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent name="react" />;
};
export default App;
// 출력 결과 : 안녕하세요, 제 이름은 react입니다.외부 컴포넌트에서 MyComponent의 props을 설정했다. props의 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있고, props를 렌더링할 때에는 JSX 내부에서 { } 기호로 감싸면 된다.
props 기본값 설정 : defaultProps
MyComponent.js
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
MyComponent.defaultProps = {
name : '최수연'
};
export default MyComponent;
// 출력 결과 : 안녕하세요, 제 이름은 최수연입니다.children
컴포넌트 태그 사이의 내용을 보여주는 props이다
App.js
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent>리액트</MyComponent>;
};
export default App; 위 코드에서 MyComponent 태그 사이에 작성한 문자열을 MyComponent 파일 내부에서 보여주려면 props.children을 사용한다.
MyComponent.js
const MyComponent = props => {
return (
<div>
안녕하세요, 제 이름은 {props.name}입니다. <br />
children 값은 {props.childern}
입니다.
</div>
);
};
MyComponent.defaultProps = {
name : '기본 이름'
};
export default MyComponent;
// 출력 결과 : 안녕하세요, 제 이름은 최수연입니다.
// children 값은 리액트입니다.비구조화 할당 문법 : 내부 값 바로 추출하기
위의 MyComponent에서는 props의 값을 조회할 때마다 'props.'라는 키워드를 붙여주고 있다. 이러한 작업을 생략하기 위해 비구조화 할당 문법을 사용하여 내부 값을 바로 추출하는 방법이 있다.
MyComponent.js
const MyComponent = props => {
const { name, children } = props; // 추가됨
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br />
children 값은 {childern}
입니다.
</div>
);
};
MyComponent.defaultProps = {
name : '기본 이름'
};
export default MyComponent;
// 출력 결과 : 안녕하세요, 제 이름은 최수연입니다.
// children 값은 리액트입니다. MyComponent.js 파일을 다음과 같이 수정하면 name 값과 children 값을 간결하게 사용할 수 있다. 이와 같이 객체에서 값을 추출하는 문법을 비구조화 할당(destructuring assignment)이라고 부른다. 구조 분해 문법이라고도 불리며, 함수의 파라미터 부분에서도 사용할 수 있다.
MyComponent.js
const MyComponent = ({ name, children }) => {
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br />
children 값은 {childern}
입니다.
</div>
);
};
MyComponent.defaultProps = {
name : '기본 이름'
};
export default MyComponent;
// 출력 결과 : 안녕하세요, 제 이름은 최수연입니다.
// children 값은 리액트입니다.객체인 함수 파라미터를 비구조화해서 사용하는 것이다. 이렇게 사용하면 훨씬 편하다. 앞으로도 함수 컴포넌트에서 props를 사용할 때 파라미터 부분에서 비구조화 할당 문법을 사용하도록 한다.
propTypes를 통한 props 검증
컴포넌트의 필수 props를 지정하거나 props의 타입(type)을 지정할 때는 propTypes를 사용한다. propTypes를 사용하려면 코드 상단에 import 구문을 사용하여 불러와야 한다.
MyComponent.js
import PropTypes from 'prop-types'; // propTypes 불러오기
const MyComponent = ({ name, children }) => {
return(...);
};
MyComponent.defaultProps = {
name: '최수연'
};
MyComponent.propTypes = {
name: propTypes.string
};
export default MyComponent; 위 코드처럼 propType을 설정해 주면 name 값은 무조건 문자열(string)형태로 전달해야 된다는 것을 의미한다. App 컴포넌트에서 name 값을 문자열이 아닌 값으로 전달하고, 개발자 도구의 Console 탭을 열어보아라.
App.js
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent name={3}>리액트</MyComponent>;
};
export default App;
// 출력 결과 : 안녕하세요, 제 이름은 3입니다.
MyComponent 컴포넌트에서 name의 propTypes를 string으로 설정하고 App 컴포넌트에서 name을 숫자형으로 설정했을 때 출력은 정상적으로 실행되지만, Console에서는 아래와 같은 오류가 발생한다.
위 경고 메세지는 propTypes가 잘못되었다는 것을 알려준다. 오류를 수정하기 위해 App 컴포넌트의 return 부분을 수정해줬다.
const App = () => {
return <MyComponent name="React">리액트</MyComponent>;
};isRequired를 통한 필수 propTypes 설정
propTypes를 지정하지 않았을 때 경고 메세지를 띄우 주는 작업을 해 보자.
MyComponent.js
import PropTypes from 'prop-types';
const MyComponent = ({ name, children, favoriteNumber }) => {
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br />
children 값은 {childern}
입니다. <br />
제가 좋아하는 숫자는 {favoriteNumber}입니다.
</div>
);
};
MyComponent.defaultProps = {
name: '기본 이름'
};
MyComponent.propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired
};
export default MyComponent;App.js
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent name="React">리액트</MyComponent>;
};
export default App; MyComponent 컴포넌트에 객체 favoriteNumber의 propTypes를 숫자형으로 설정하고 isRequired를 붙여주었다. 코드를 저장한 후 개발자 도구의 Console을 확인해보면 아래와 같은 경고가 나타난다.
오류를 수정하기 위해 App 컴포넌트의 return 부분을 수정해줬다.
const App = () => {
return (
<MyComponent name="React" favoriteNumber={1}>리액트</MyComponent>
);
};
이 글에서는 string과 number PropTypes를 알아봤다. 하지만, PropTypes는 이 외에도 여러가지 종류를 설정할 수 있다.
- array : 배열
- arrayOf(다른 PropType) : 특정 PropType로 이루어진 배열
- bool : true/false 값
- func : 함수
- number : 숫자
- object : 객체
- string : 문자열
- symbol : ES6의 Symbol
- node : 렌더링할 수 있는 모든 것(숫자, 문자열, JSX코드, children 등)
- instanceOf(클래스) : 특정 클래스의 인스턴스
- oneOf(['dog', 'cat']) : 주어진 배열 요소 중 값 하나
- oneOfType([React.PropTypes.string, PropTypes.number]) : 주어진 배열 안의 종류 중 하나
- objectOf(React.PropTypes.number) : 객체의 모든 키 값이 인자로 주어진 PropType인 객체
- shape({ name: PropTypes.string, num: PropTyes.number }) : 주어진 스키마를 가진 객체
- any : 아무 종류
등 다양한 종류의 PropTypes가 있다. 더 자세한 정보는 https://github.com/facebook/prop-types 에서 확인할 수 있다.
클래스형 컴포넌트의 props
클래스형 컴포넌트에서도 props를 사용할 수 있다. 함수형 컴포넌트와의 차이점은 코드를 확인한 후 알아보자.
MyComponent.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class MyComponent extends Component {
static defaultProps = {
date: '기본 이름'
};
static propTypes = {
data: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired
};
render() {
const { name, children, favoriteNumber } = this.props; // 비구조화 할당
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br />
children 값은 {childern}
입니다. <br />
제가 좋아하는 숫자는 {favoriteNumber}입니다.
</div>
);
}
};
// 함수 외부에 선언 가능
/*
MyComponent.defaultProps = {
name: '기본 이름'
};
MyComponent.propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired
};
*/
export default MyComponent;함수형-클래스형 컴포넌트에서의 props 사용 차이점
- render 함수에서 비구조화 할당과 return을 실행한다
- defaultProps와 propTypes는 class 내부에서도 선언 가능하다
defaultProps와 propTypes는 꼭 사용해야 하는가?
이 두 가지 설정은 컴포넌트의 필수 사항이 아니므로 꼭 사용할 필요는 없다. 하지만 React를 통해 큰 규모의 프로젝트를 진행한다면, 특히 다른 개발자들과 협업한다면 해당 컴포넌트에서 어떤 props가 필요한지 쉽게 알 수 있어 개발 능률이 좋아질 것이다.
