[ React ] [Chapter 15] prop-types 속성값 타입 정의하기

prop-types 속성값 타입 정의

 

prop-types 패키지는 속성값의 타입 정보를 정의할 때 사용하는 리액트 공식 패키지이다.일단 prop-types 패키지를 배우기 이전에type을 왜 지정 하는지에 대해 알아보겠습니다.일단 자바스크립트는 동적 타입 언어이다. 타입에 대한 고민을 안 하고, 코드를 작성할 수 있고, 바로 작성한 코드로 어플리케이션을 실행 시킬 수 있죠 그래서 배우기 쉽고 간단한 어플리케이션을 작성할 때는 생산성이 좋기도 합니다.
그런데 큰 규모의 어플리케이션을 작성할 때는 오히려 생산성이 떨어집니다. 그래서 리액트의 정적 타입 언어를 배워두는것이 좋습니다. 간단한 어플리케이션만 작성할건 아니니깐요

사용 예

 

function Home({ name, age, memberState, onNameChange, isOk }) {
  return (
    <div>
      
    </div>
  );
}

뭐 이런 함수에 저런 파라미터를 받는다고 가정합시다. 그럴 경우 name가 무엇을 의미 하는지 age가 무엇을 의미하는지 몰를 수 있습니다 저런 간단한 name 나 age 같은 경우는 예측을 할수는 있겠죠 name는 문자열 age는 숫자

하지만 어떠한 경우에는 해당 객체가 어떤 타입을 가졌는지 유추하기가 힘들기도 하고 해당 객체가 어떤 타입을 가졌는지 알려면 해당 객체를 쓰고  있는 코드를 보아야 하죠.

그럼 prop-types를 정의 해봅니다.

Home.propTypes = {
	name : PropTypes.string // string보니 문자형식
    age : PropTypes.number, // number 보니 숫자형식
    memberState : PropTypes.oneOf([ 'NORMAL', 'HOLD' ]), // oneOf로 NORMAL,HOLE 두개값만 받음
    onNameChange : PropTypes.func.isRequired, // func 보니 함수형이고 isRequred보니 필수값
    isOk : PropTypes.bool.isRequired, // bool 보니 boolean이고 isRequired보니 필수값
};

function Home({ name, age, memberState, onNameChange, isOk }) {
  return (
    <div>
      
    </div>
  );
}

정의를 해보니 어떤 데이터가 어떤 값인지 한눈에 보입니다.

string 나 number는 딱봐도 뭔지 알거고 oneOf는 해당 배열 값만 받는다는 의미이고 isRequired가 붙으면 필수값이라는 의미 입니다.

그런데 func로 함수라는걸 정의를 했는데 해당 함수의 매개변수라던가 반환값에 대한 타입 정보는 정의할 수 없습니다.그럴 때는 주석으로 자세한 타입을 적어주면 좋습니다.

// 리액트 요소 예) <div>hi</div>
PropTypes.element

// 컴포넌트 함수가 반환할 수 있는 모든것
// string, number... 등등 
PropTypes.node

// Message 클래스로 생성된 모든 객체
// new Message()
PropTypes.instanceOf(Message)

//배열에 포함된 값 중에서 하나를 만족
// id01, id02만 들어올수있음
PropTypes.oneOf([ 'id01', 'id02' ])

// 배열에 포함된 타입 중에서 하나를 만족
// string, number 값만 들어울 수 있음
PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]);

// 특정 타입만 포함 하는 배열
// [ 1,2,3 ] 만 들어올수있음
PropTypes.arrayOf(PropTypes.number);

// 객체의 속성값 타입을 정의
// { color : 'bule'} 
PropTypes.shape({color : PropTypes.string, })

// 객체에서 모든 속성값의 타입이 같은 경우
// { name : '홍길동', addr : '서울' }
// { name : '홍길동', addr : 123 } 일경우 안됌
PropTypes.objectOf(PropTypes.string);

관련 글

저의 글을 읽어 주셔서 감사합니다. 오늘도 즐거운 하루 보내세요.

저의 글이 조금이나마 도움이 되셨다면 로그인이 필요 없는 공감♥ 한번 꾸욱 눌러주세요 하하~