#2 JSX & PROPS

2.0 Creating your first React Component

Component

: HTML을 반환하는 함수이다.

ex) <App />

 

react는 component를 사용하여 HTML처럼 작성하려는 경우에 필요하다.

javascript와 HTML 사이의 이러한 조합을 JSX라고 한다.

 

새로운 component Potato를 만들어보자

 

index.js에서 한 번에 둘 이상의 component를 rendering하려하면, 오류가 발생한다.

⛔ react application은 하나의 component만을 rendering해야 한다.

 

-> 올바르게 사용한 예시

react는 Component를 가져와 Browser가 이해할 수 있는 평범한 일반 HTML로 만든다.

 

📌 <정리 />

react application은 하나의 component만을 rendering할 수 있다.
따라서 모든 것은 application(<App />) 안에 들어가야만 한다.

application안에서 많은 component를 넣을 수 있다.
그리고 이러한 component 안에 더 많은 component를 import 할 수 있다.

---

2.1 Reusable Components with JSX + Props

App.js 파일 내에 여러 컴포넌트 만들어서 사용

react가 멋진 이유

: 재사용 가능한 component를 만들 수 있다!

component를 계속해서 반복하여 사용할 수 있다.

 

Props

food component에 fav라는 이름의 property(props)를 kimchi라는 value로 준다.

 

If you want to look nice:

📌 JSX = HTML + Javascript

---

2.2 Dynamic Component Generation

javascript의 object

list의 object를 가져와 function component, food component를 동적으로 rendering해보자!

 

map

: array로부터 rendering을 한다. 결과를 array로 반환한다.

 

■ Javascript에서...

friends = ["dal", "mark", "lynn", "dane"]

// JS
friends.map(function(friend) {
    return friend + "💜";
})

// JSX
friends.map(function(friend => (
    return friend + "💜";
))

결과 

▶ (4) ["dal💜", "mark💜", "lynn 💜", "dane💜"]

 

■ JSX

• Food component: 2개의 props를 가진다.
  - name
  - picture
• foodILike 의 Object들
  - name
  - image
• map의 dish
  : Object

결과

map을 통해 dish에 FoolILike 리스트의 각 Object들이 mapping되었다.

---

2.3 map Recap

각 component를 구별하기 위한 unique한 key값을 줘야 한다.

const foodILike = [
  {
    id: 1,
    name: "Kimchi",
    image:
      "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg"
  }
]

key prop은 Food에서 사용하지 않으므로 Food로 전달하지 않는다.

이것은 기본적으로 react 내부에서 사용하기 위한 것이다.

+ img element는 반드시 alt를 넣어준다.

 

2.4 내용: 우리가 원하는 props가 우리가 갖고 있는 props인지 확인하는 과정이 필요하다.

---

2.4 Protection with PropTypes

father component로부터 전달 받은 props가 우리가 예상한 props인 지 항상 점검할 필요가 있다.

 

prop-types

설치

npm i prop-types

: 내가 전달받은 props가 내가 원하는 props인지 확인해준다.

- packages.json의 dependencies에 prop-types가 추가되었다면, 제대로 설치된 것이다.

 

sometimes)

food component는 다른 file에 있을 수 있고, picture를 보내는 대신 image를 보내는 실수를 할 수있다.

이때, 실수와 component는 제대로 동작하지 않을 것을 알려주는 무언가 => prop types

 

import PropTypes from 'prop-types';

Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number
}

• PropTypes.Type: Type or undefined

PropTypes.Type.isRequired: must be Type