망할고양이의 도피처

propTypes를 이용한 props의 Type 지정

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할때 propTypes를 사용하여 지정할 수 있습니다.

프로젝트의 규모가 커질 수록 예상할 수 없는 곳에서 발생하는 Error들이 있습니다. 이러한 Error를 예방하기 위해서는 PropTypes를 지정하고 타입(type)을 확인하는 것이 좋습니다.

방법은 이전 장에서 학습한 defaultProp와 유사하며 import구문을 이용하여 'prop-types'를 로드해야합니다.

Props.js 를 수정합니다. 

import PropTypes from 'prop-types';

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        <hr/>
        <div>너는??? - {props.children}  </div>
        <hr/>
        <div>PropTypes Test : {props.typeTest}  </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
    ,typeTest : "문자"
};

Props.propTypes = {
    typeTest : PropTypes.string
};

Apps.js도 prop 값을 추가로 전달하기 위해 수정합니다.

숫자값을 전달할 때에는 『 typeTest="99" 』가아닌 『 typeTest={99} 』 형태로 전달할 수 있습니다. 

『 typeTest="99" 』로 전달하는 경우 문자열로 인식되게 됩니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props name="prop 테스트" typeTest={99} >내가 children이다 </Props>
    </div>
  );
}

export default App;

결과를 보면 타입을 string으로 지정하고 숫자 99를 전달하였지만 정상적으로 99가 표현됩니다. 

하지만 개발자 도구를 열어서 확인해보면 아래 그림과 같이 경고가 발생한 것을 확인할 수 있습니다. 

많은 종류의 PropTypers가 있으며 자세한 내용과 종류는 아래 링크에서 확인할 수 있습니다.

https://github.com/facebook/prop-types

children..?

props를 설명하는 글은 많지만 props 중 children을 설명하는 글을 본적이 없는것 같아서 작성하게 되었습니다.

리엑트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 prop가 children 입니다. 

Apps를 수정하여 알아보도록 하겠습니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props>내가 children이다 </Props>
    </div>
  );
}

export default App;

children을 표현할수 있도록 Props 를 수정합니다..

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        <hr/>
        <div>너는??? - {props.children}  </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
};