React 기초 (3) : Props

1. Props 사용법

src/App.js

import React from 'react';

function Food(props) { // --- (2)
  return <h1>I like {props.favorite}</h1> // --- (3)
}

/*
function Food({favorite}) {
	return <h1>I like {favorite}</h1>
} --- (4)
*/ 

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Food favorite="Pasta"  /> // --- (1)
      <Food favorite="Potato" />
      <Food favorite="Soju"   />
      <Food favorite="떡볶이"   />
    </div>
  )
}

export default App;

• component는 재사용이 가능하다.
• props를 사용하여 하나의 component로 여러 결과물을 만들 수 있다.
• (1) Food component 에 favorite이라는 props를 넘겨주었다. favorite은 "Pasta"라는 String 데이터를 갖고 있는 변수이다.
• (2) component의 첫 번째 argument는 props 정보이다.
• (3) props에 담겨있는 favorite 정보를 출력한다.
• (4) JS 최신 문법에 다라서 이와 같이 작성할 것을 권장한다.

결과물

---

2. 동적 Props

src/App.js

import React from 'react';

function Food({ favorite }) {
  return <h1>I like {favorite}</h1>
}

const foodILike = [
  "Pasta",
  "Potato",
  "Soju",
  "떡볶이"
] // --- (1)

function App() {
  return (
    <div>
      <h1>Hello</h1>
      {foodILike.map(food => <Food favorite={food}></Food>)} // --- (2)
    </div>
  )
}

export default App;

• props에 동적 데이터를 넘겨줄 수 있다.
• HTML element 사이의 { }표시는 javascript코드 라는 것을 의미한다. 이를 JSX라고 한다.
• (1) foodILike는 Food component에 props에 넘겨줄 데이터를 갖고 있는 배열이다.
• (2) map을 사용하여 foodILike 각각의 data에 접근하여 Food component에 favorite prop로 넘겨준다.

---

추가 수정한 src/App.js

import React from 'react';

function Food({ favorite }) {
  return <h1>I like {favorite}</h1>
}

function renderFood(food) {
  return <Food key={food} favorite={food}></Food> // --- (1)
}

const foodILike = [
  "Pasta",
  "Potato",
  "Soju",
  "떡볶이"
]

function App() {
  return (
    <div>
      <h1>Hello</h1>
      {foodILike.map(renderFood)}
    </div>
  )
}

export default App;

• 위 코드와 같이 리펙토링 할 수 있다.
• (1) 동일한 component(element)가 반복문을 통해 생성될 경우 각각의 component들은 서로 다른 key 값을 가져야한다.

결과물

---

3. PropTypes

왜 사용하는가?

• 프로젝트 규모가 커질수록 각 component에서 어떤 prop들을 원하는지 알기 어려워진다.
• 이러한 상황은 에러에 취약해지며, 유지보수가 어려울 수 있다.
• PropTypes를 사용하여 각 component의 명세서를 작성하는 것이다.

설치

$ yarn add prop-types

코드

src/App.js

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

function Food({name, rating}) {
  return (
    <div>
      <h2>I like {name}</h2>
      <h4>{rating}/5.0</h4>
    </div>
  )
}

Food.propTypes = {
  name: PropTypes.string.isRequired,
  rating: PropTypes.number.isRequired,
} // --- (1)

const foodILike = [{
  id: 1,
  name: "Pasta",
  rating: 5,
}, {
  id: 2,
  name: "Potato",
  rating: 4,
}, {
  id: 3,
  name: "Soju",
  rating: 4,
}, {
  id: 4,
  name: "떡볶이",
  rating: 4,
},
]

function App() {
  return (
    <div>
      <h1>Hello</h1>
      {foodILike.map(({id, rating, name}) => <Food key={id} rating={rating} name={name} />)}
    </div>
  )
}

export default App;

• (1) component.PropTypes의 형태로 component의 prop type을 설정한다.
• PropTypes에 맞지 않는 prop 값이 넘어올 경우, error가 발생한다.