JSX & PROPS

2.1 Reusable Components with JSX + Props

-componenent에 정보를 보낼 수 있다. react는 재사용 가능한 componenent를 만들 수 있어서 반복하여 사용할 수 있다.
-여기서 componenen에서 componenent로 childeren componenent로 정보를 보내는 방법이 필요하다.

-이처럼 app componenent에서 food componenent로 정보를 보내고 그 다음food componenent에서 그 정보를 어떻게 사용할지 알아야한다.

-food componenent에서 fav라는 이름의 props을 kimchi라는 value로 prop 할당한다. 이처럼 father componenent, app에서 childeren componenent로 원하는 만큼 props를 보낼 수 있다.
-react는 food componenent로 정보를 보내려하면 우리가 전달한 모든 props의 속성을 가져온다. 그리고 food function componenent의 인자로 props들을 넣으면 component로 전달된 props objcet가 나온다.
-props.fav는 kimchi를 의미하는데 이것을 food function componenent의 인자에 넣을 떈 props.fav와 같은 의미로 { fav }와 같은 형식으로 전달할 수 있다.
-이렇게 동적 데이터를 지닌 componenent를 jsx와 props을 활용하여 모두 재사용할 수 있다.

2.2 Dynamic Component Generation

• 웹사이트에 동적 데이터를 추가하는 방법?
  데이터가 이미 API로부터 받아 왔다는 가정하에

1. 먼저 할 일은 함수를 만든다. 이 함수는 foodILIke로 불리는 array이다.
2. 기본적으로 이 모든 component들을 rendering한다.
3. object의 list를 가져오고 food component를 동적으로 rendering한다
4. array에 json방식으로 음식이름과 이미지를 넣어주고 자동으로 food를 이름과 사진을 함께 렌더링하기 위해서 javascript에 있는 map을 이용한다.

*)map?

• map은 array의 각 item에 function을 적용하고 적용된 array를 반환한다.
  배열.map()은 배열안에 있는 각 item에 대해 실행되는 function을 준다.
• map에 첫번째 argument를 넣는데, 첫번째 argument는 current를 넣으면 current함수를 각각의 배열 frieds item에 실행시킴을 의미한다.
  
• map은 function을 취해서 그 function을 array의 각 item에 적용해 a b c d e item들에게 function을 준 뒤 연산의 결과로 array를 만들고 각 연산의 result는 0이다.
  
• 아래는 위와 같이 동작하지만 다른 표기 법이다.
  

-father componenent, app function안에 js를 넣어주는 {}안에 넣어주면 js로 인식한다.
그 안에 foodILIke 배열에 map 메소드를 사용하여 각각의 food, item이 food component를 도는데 props으로 name과 image를 보내준다.
-중요한건 여기서 우리가 사용한 food가 object라는 것이다 object이기 때문에 내부에 있는 object.name과 object.image를 처리할 수 있다.

-이 두개의 props을 function Food({ name,image }) 인자로 넣어주고 html태그로 출력하면된다.

2.3 map Recap

• 우리는 원하는 Props를 받고 있는지 체크할 수 있는 방법?

  -react의 모든 element들은 다르게 보일 필요가 있다. 우리가 이것을 list 안으로 집어넣으면, element들은 유일성을 잃어버린다. 따라서 현재 food component들이 다른 name, 다른 imgae를 가지고 있다는걸 react에게 알려줘야한다.
  -이 item들에 각각 ID props를 추가하고 key = {food.ID}를 넣어준다.

{foodILike.map(food => <Food name={food.name} image={food.image}/>)}

2.4 Protection with PropTypes

-우리가 원하는 props이 우리가 갖고 있는 props인지에 대해서 체크하는 방법이 필요하다. 즉, father component로 부터 전달받은 props가 우리가 예상한 props인지를 항상 점검할 필요가 있다.
-우선 list에 있는 item 각각에 추가할 것은 rating props를 추가해준다.
-그리고 node.js에 npm i prop-types 입력하여 prop-types을 설치한다. 이것은 우리가 전달받은 props가 내가 원하는 props인지를 확인해 주는 역할을 한다.

-그리고 import하여 PropTypes from "prop-types"를 추가해준다.
-food component에 prop-types 추가하여 Food.propTypes에 가서 props를 체크하도록 만든다.