리액트 컴포넌트 prop-types 도입

 

 

*props의 역할을 안다고 가정하고 진행합니다.

 

 

개요

 

컴포넌트의 props를 다룰 때에는 많은 경우 어떤 데이터 타입의 값이 전달될지를 미리 정하고 다루게 됩니다. 그런데 만일 우리가 정의한 props의 값이 컴포넌트에 제대로 전달되지 않으면 어떻게 해야 할까요?

예를 들어 다음과 같은 컴포넌트가 있다고 하겠습니다. 

function Food(props){
  return <h2>{`맛있는 ${props.food}`}</h2>
}

이 컴포넌트는 누가 봐도 food라는 문자열 타입의 데이터가 props로 전달되는 것이 마땅해 보이는 컴포넌트입니다. 그러나 여기에 숫자 데이터를 전달하는 것도 충분히 가능한 일입니다. 여기에는 아무런 제한 사항도 없기 때문입니다.

function App() {
  return (
    <div>
      <Food food={1} />
    </div>
  );
}

이러한 동작은 사용자가 썩 반길 만한 동작이 아닙니다. 따라서 이제 food props를 Food 컴포넌트에 전달하면서 이 값을 검사하는 기능을 추가해보도록 하겠습니다. 그러려면 props의 자료형을 검사할 수 있도록 만들어 주는 prop-types라는 도구를 설치해야 합니다. 

명령 프롬프트(터미널)에서 다음의 명령어를 실행시켜 설치를 진행하겠습니다.

 

 

설치

 

prop-types는 컴포넌트가 전달받은 props가 정말 내가 원하는 값인지 확인해 주는 역할을 합니다. 개발을 하다 보면 실수하는 일이 잦은데, prop-types를 통해 미리 '어떻게 되어야만 한다'라는 것을 미리 정해두어 정의된 바를 이행하지 못했을 때 그것을 캐치할 수 있도록 하는 것입니다. 

 

 

적용

 

prop-types의 적용을 위해 App.js를 다음과 같이 작성(수정)해주도록 하겠습니다. 

import React from 'react';
import './App.css';
 
import PropTypes from 'prop-types';
 
function Food(props){
  return <h2>{`맛있는 ${props.food}`}</h2>
}
 
function App() {
  return (
    <div>
      <Food food={1} />
    </div>
  );
}
 
Food.propTypes= {
  food: PropTypes.string.isRequired
}
 
export default App;

코드를 작성한 다음 저장하고 앱을 실행해 보면 별 문제가 없어 보입니다. 그러나 console 창을 확인해 보면 다음과 같은 경고 메시지가 뜨는 것을 확인할 수 있습니다. 

 

Failed라는 단어가 무언가 잘못되었음을 표현해주고 있습니다. 이렇듯 prop-types를 사용해 props의 데이터 타입을 지정하면 잘못된 데이터 타입이 전달되었을 때 바로 캐치할 수 있도록 앱이 기능을 지원하게 됩니다. 

 

 

isRequired

 

isRequired는 props 중 필수 항목에 대한 지정을 의미합니다. 따라서 필수 항목으로 지정된 props를 전달해주지 않으면 이 또한 실패로 간주됩니다.