React.js study - 2

⭐️ propTypes를 통한 props 검증

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

import PropType from 'prop-types'

const MyComponent = ({name, children}) => { 
    return;
};

그러고 나서 propTypes 를 string으로 지정합니다.

import PropType from 'prop-types'

const MyComponent = ({name, children}) => { 
    return(
        <div> 안녕하세요, 제 이름은 {name} 입니다. <br/>
        children 값은 { children } 입니다. </div>
    );
};
MyComponent.defalutProps = {
    name: '기본이름'
};
MyComponent.propTypes = {
    name: PropType.string
};

export default MyComponent;

이렇게 App.js에다가 전달시에는 name값을 문자열 형태로 전달해야하는 것을 의미합니다. 이때 App.js 에서

const App = () => {
  return <MyComponent name={3}>리액트</MyComponent>;
};

위와 같이 숫자로 전달할 경우 출력은 값이 나타나지만, 콘솔을 확인할 경우에는 에러메세지가 나타나는 것을 확인할 수 있습니다. 해결 하기 위해서는 name의 값을 string 형식으로 바꾸어 주어야 합니다.

⭐️ isRequired를 사용하여 필수 propTypes 설정

다음은 propTypes를 지정하지 않았을 경우 경고 메세지를 띄워 주는 작업을 해보겠습니다.

propTypes를 지정할 때 뒤에 isRequired를 붙여 주면 됩니다.

이번에는 favoriteNumber라는 숫자를 필수 prop로 지정해 보겠습니다.

import PropType from 'prop-types'

const MyComponent = ({name, favoriteNumber, children}) => { 
    return(
        <div> 안녕하세요, 제 이름은 {name} 입니다. <br/>
        children 값은 { children } 입니다. <br />
        제가 좋아하는 숫자는 {favoriteNumber} 입니다.</div>
    );
};
MyComponent.defalutProps = {
    name: '기본이름'
};
MyComponent.propTypes = {
    name: PropType.string,
    favoriteNumber: PropType.number.isRequired
};

export default MyComponent;

위와 같이 작성하고 실행 시에는 favoriteNumber가 지정되어 있지 않기에 경고가 나타납니다.

import './App.css';
import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent name={'리액트'} favoriteNumber={1} >리액트</MyComponent>;
};

export default App;

값을 지정해주고 다시 실행 해보니 아무 에러도 나타나지 않음!

⭐️ 이외 PropTypes 종류

• array: 배열
• arrayOf(다른 PropType): 특정 PropType으로 이루어진 배열을 의미합니다. 예를 들어 arrayOf(PropTypes.number)는 숫자로 이루어진 배열입니다.
• bool: true 혹은 false 값
• func: 함수
• number: 숫자
• object: 객체
• string: 문자열
• symbol: ES6의 Symbol
• node: 렌더링 가능한 모든 것
• instanceOf(클래스): 특정 클래스의 인스턴스(예: instanceOf(myClass))
• oneOf([’dog’, ‘cat’]): 주어진 배열 요소 중 값 하나
• oneOfType([React.PropTypes.string, PropTypes.number]): 주어진 배열 안의 종류 중 하나
• objectOf(React.PropTypes.number): 객체의 모든 키 값이 인자로 주어진 PropType인 객체
• shape({ name: PropTypes.string, num: PropTypes.number }): 주어진 스키마를 가진 객체
• any: 아무 종류

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

함수형을 보았으면 이젠 클래스형을 봅시다.

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

그리고 defaultProps와 propTypes는 똑같은 방식으로 설정할 수 있습니다.

MyComponent를 다음과 같이 클래스형 컴포넌트로 변형해 보겠습니다.

import { Component } from "react";
import PropTypes from 'prop-types';

class MyComponent extends Component{
    render(){
        const{ name, favoriteNumber, children} = this.props;
        return(
            <div>
                안녕하세요, 제이름은 { name}입니다. <br />
                children 값은 { children}입니다. <br />
                제가 좋아하는 숫자는 {favoriteNumber}입니다.
            </div>
        )
     }
}
MyComponent.defaultProps ={ 
    name: '기본 이름'
};
MyComponent.propTypes = {
    name: PropTypes.string,
    favoriteNumber: PropTypes.number.isRequired
};
export default MyComponent;

이때 MyComponent.defaultProps, MyComponent.propTypes 를 class 내부에서 지정하는 방법도 있습니다.

import { Component } from "react";
import PropTypes from 'prop-types';

class MyComponent extends Component{
    static defaultProps ={ 
        name: '기본 이름'
    };
    static propTypes = {
        name: PropTypes.string,
        favoriteNumber: PropTypes.number.isRequired
    };
    render(){
        const{ name, favoriteNumber, children} = this.props;
        return(
            <div>
                안녕하세요, 제이름은 { name }입니다. <br />
                children 값은 { children}입니다. <br />
                제가 좋아하는 숫자는 {favoriteNumber}입니다.
            </div>
        )
     }
}

export default MyComponent;