props와 map 그리고 propTypes

안녕하세요! 건브로입니다. 요즘 코로나가 전염성이 엄청나서 그런지

내일부터 5인 이상 금지라고 하네요. 힘들겠지만, 다들 화이팅하시고 

이럴 때 일수록 자기 자신의 능력치를 올리면서 나중에 뽐내봅시다!

---

1. props란 무엇일까요?

props를 react.js를 처음 공부하는 사람들은 처음 들어볼 거예요.

(물론 vue.js를 공부했던 사람을 알 것입니다!)

props는 컴포넌트끼리 값을 이동시키기 위해서 사용해요.

 

축구로 예를 들어봅시다.

이 밑에 있는 코드들과 연관되어 있는 index.js, index.html은 이 글과 이어집니다!

gun-bro.tistory.com/4

React의 구조와 JSX

//App.js
import React from 'react';

function Sports({name, isManyPeople}){
  return(
    <div>
      <p>{name}은 인원수가
      { isManyPeople ? ' 많이 필요합니다.':' 적게 필요합니다.'}
      </p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Sports name = '축구' isManyPeople = {true}/>
    </div>
  );
}

export default App;

축구는 기본적으로 22명이 있어야 정식으로 경기를 할 수 있잖아요?

그래서 저는 축구는 사람이 많다고 판단해서 true라고 했습니다.

 

근데 저렇게 값을 설정했는데 props가 뭐냐고요?

props는 name과 isManyPeople이 되겠네요.

자식 컴포넌트에게 값을 전달할 때 props가 필요합니다.

그게 바로 name과 isManyPeople의 역할이에요.

props는 properties라고 생각하시면 됩니다. 

 

그러면 결국에는 부모 컴포넌트는 App이 되는 것이고 자식 컴포넌트는 Sports가 됩니다.

근데 우리는 주로 이렇게 데이터를 받지 않아요. 다르게 해 봅시다.

 

2. map() 함수

map이란 지도가 아닙니다! map은 배열에 각 요소에 함수를 부여해주는 함수입니다.

말이 좀 이상하죠? 바로 보여드릴게요!

 

//App.js
import React from 'react';

function Sports({name, isManyPeople}){
  return(
    <div>
      <p>{name}은 인원수가
      { isManyPeople ? ' 많이 필요합니다.':' 적게 필요합니다.'}
      </p>
    </div>
  );
}

const sportsData = [
  {
    id:1,
    name: '축구',
    manyPeople: true
  },
  {
    id:2,
    name: '야구',
    manyPeople: true
  },
  {
    id:3,
    name: '탁구',
    manyPeople: false
  },
  {
    id:4,
    name: '배드민턴',
    manyPeople: false
  }
]

function App() {
  return (
    <div>
      {sportsData.map(data => 
        <Sports key={data.id} name={data.name} isManyPeople={data.manyPeople}/>
      )}
    </div>
  );
}

export default App;

 

이렇게 보신 거와 같이 map함수가 추가되었죠?

이렇게 사용하시면 App컴포넌트의 return 값으로 Sports태그로 나열할 필요가 없어져요!

 

아 그리고 주의할 점이 있어요.

바로 props로 key값으로 줘야 한다는 점입니다.

key가 없으면 react가 인식을 못해서 오류가 나오는 것 같아요.

그래서 내부적으로 인식할 수 있도록 key값을 설정해 둡시다.

key를 써야 하는 경우는 뭔가 반복적으로 컴포넌트를 써야 할 때입니다! 주의하세요!

map함수와 props 사용한 리액트 결과

이러한 결과가 나와요. 신기하죠?

이렇게 props와 map함수를 같이 쓰면 이렇게 만들 수 있어요.

 

3. propTypes

propTypes는 일종의 검사 같은 거예요.

props를 많이 설정하다 보면 실수를 할 때가 있어요.

그래서 그런 실수를 줄이고자 검사 용도로 쓰입니다.

import PropTypes from "prop-types";

Sports.propTypes = {
  name: PropTypes.string.isRequired,
  isManyPeople: PropTypes.bool.isRequired
}

propTypes를 쓰고 싶을 때는 VSCode 터미널에 npm i prop-types라고 치시면 다운됩니다.

이렇게 다운로드하면 위의 코드처럼 쓰시면 돼요.

 

만약 여러분이 타입의 틀렸는지만 알고 싶다면 isRequired를 쓰실 필요가 없어요.

그냥 위의 코드로 예시를 들면 PropTypes.string이나 PropTypes.bool까지만 쓰시면 됩니다.

근데 만약 Sports 컴포넌트가 받는 인수가 맞는지

안 맞는지 확인하고 싶을 때는 isRequired까지 써주셔야 해요.

 

오늘은 여기까지 포스팅하겠습니다!!

다들 화이팅😀