[ React ] ProtoTypes 설치하기 | ProtoTypes install

나는 VSCode 를 사용한다.

 

 

 

터미널에서 npm i prop-types 입력한다.

 

 

npm i prop-types

 

 

 

 

 

 

좀 기다려준다.

 

 

 

 

prop-types 는 내가 전달받은 prop 이 내가 원하는 prop 인지를 확인해 주는 역할을 한다.

 

 

 

 

잘 설치되었는지 확인해보자.

 

 

 

package.json 을 보면 "dependencies" 에 prop-types 가 있는지를 확인할 수 있다.

 

 

 

 

 

정상적으로 설치된 것을 확인할 수 있다.

 

 

 

 

간단하게 사용해보자.

 

 

우선 import를 해줘야한다.

 

 

 

import ProtoTypes from "prop-types";

 

import React from "react";
import PropTypes from "prop-types";

function Butter({name, img}){
  return(
    <div>
      <h1>Do you know {name}?</h1>
      <img src={img} />
    </div>
         
  )
}

const doYouKnow = [
  {
    id : 1,
    name : "Butter",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.3ngupVxCT3OmGg5AkbyazwHaFe%26pid%3DApi&f=1"
  },
  {
    id : 2,
    name : "BTS",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.IsHrnAKvQqN3f5AVi0KU-wHaE8%26pid%3DApi&f=1"
  },
  {
    id : 3,
    name: "Son",
    img:
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.fLj_aPPfMYXtvG7Ttlbu_wHaEo%26pid%3DApi&f=1"
  },
  {
    id : 4,
    name : "Twice",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.OCSAST2D7gyP44mSoMo0dgHaFy%26pid%3DApi&f=1"
  },
  {
    id : 5,
    name : "Psy",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.6lhGd_oCuFgnm8x9OK7T6QHaE5%26pid%3DApi&f=1"

  }
]


function App() {
  return (
    <div>
      <h1>Halo!</h1>
      {doYouKnow.map(famous=> <Butter key = {famous.id} name={famous.name} img = {famous.img}/>)}
    </div>
  );
}

export default App;

 

 

 

 

import 를 한 코드는 위와 같다.

 

이제 propTypes 라는 prop 을 정의해주도록 하자.

 

 

 

Butter.propTypes = {
  name : PropTypes.string.isRequired,
  img : PropTypes.number.isRequired
};

 

 

name 의 proptypes 를 스트링(필수) 로 하고, img 도 이와 마찬가지로 스트링으로 설정했다.

 

 

위 코드를 보면 알겠지만, img 는 현재 number 이 아닌 string 형이다.

 

 

아래 코드로 실행해보겠다.

 

 

 

 

import React from "react";
import PropTypes from "prop-types";

function Butter({name, img}){
  return(
    <div>
      <h1>Do you know {name}?</h1>
      <img src={img} />
    </div>
         
  )
}

const doYouKnow = [
  {
    id : 1,
    name : "Butter",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.3ngupVxCT3OmGg5AkbyazwHaFe%26pid%3DApi&f=1"
  },
  {
    id : 2,
    name : "BTS",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.IsHrnAKvQqN3f5AVi0KU-wHaE8%26pid%3DApi&f=1"
  },
  {
    id : 3,
    name: "Son",
    img:
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.fLj_aPPfMYXtvG7Ttlbu_wHaEo%26pid%3DApi&f=1"
  },
  {
    id : 4,
    name : "Twice",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.OCSAST2D7gyP44mSoMo0dgHaFy%26pid%3DApi&f=1"
  },
  {
    id : 5,
    name : "Psy",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.6lhGd_oCuFgnm8x9OK7T6QHaE5%26pid%3DApi&f=1"

  }
]

Butter.propTypes = {
  name : PropTypes.string.isRequired,
  img : PropTypes.number.isRequired
};

function App() {
  return (
    <div>
      <h1>Halo!</h1>
      {doYouKnow.map(famous=> <Butter key = {famous.id} name={famous.name} img = {famous.img}/>)}
    </div>
  );
}

export default App;

 

 

 

 

 

 

 

html 로 나오는 것에는 문제가 없지만, 콘솔을 보면

 

 

img 의 type 이 문제가 되었다고 얘기해준다.

 

 

 

 

proptypes 는 이런 식으로 우리가 원하는 타입을 지정하고 이를 어길 시 경고를 해준다.

 

 

 

img 를 string 으로 바꿔보자.

 

 

 

import React from "react";
import PropTypes from "prop-types";

function Butter({name, img}){
  return(
    <div>
      <h1>Do you know {name}?</h1>
      <img src={img} />
    </div>
         
  )
}

const doYouKnow = [
  {
    id : 1,
    name : "Butter",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.3ngupVxCT3OmGg5AkbyazwHaFe%26pid%3DApi&f=1"
  },
  {
    id : 2,
    name : "BTS",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.IsHrnAKvQqN3f5AVi0KU-wHaE8%26pid%3DApi&f=1"
  },
  {
    id : 3,
    name: "Son",
    img:
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.fLj_aPPfMYXtvG7Ttlbu_wHaEo%26pid%3DApi&f=1"
  },
  {
    id : 4,
    name : "Twice",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.OCSAST2D7gyP44mSoMo0dgHaFy%26pid%3DApi&f=1"
  },
  {
    id : 5,
    name : "Psy",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.6lhGd_oCuFgnm8x9OK7T6QHaE5%26pid%3DApi&f=1"

  }
]

Butter.propTypes = {
  name : PropTypes.string.isRequired,
  img : PropTypes.string.isRequired
};

function App() {
  return (
    <div>
      <h1>Halo!</h1>
      {doYouKnow.map(famous=> <Butter key = {famous.id} name={famous.name} img = {famous.img}/>)}
    </div>
  );
}

export default App;

 

 

 

 

 

 

경고가 뜨지 않는 것을 확인할 수 있다.

 

 

 

 

prop-types 를 더 자세히 알고 싶다면, 아래 링크를 참조하면 될 것 같다.

 

 

 

 

www.npmjs.com/package/prop-types

prop-types