JSX: Components 와 Props

React를 이해하기 위해서는 JSX라는 개념을 알아야하는데

JSX는 Xml + Javascript를 의미한다. JS와 html을 알고 있다면 어렵지 않다.

대신 JSX만의 문법이 몇 가지 있는데 첫 번째가 Components이다.

 

JSX(1) : components & Props

Components를 쓰면 반복되는 부분을 획기적으로 재사용 할 수 있다.

props로 아래 사진의 Noodel이나 Coffee처럼 달라지는 부분을 컨트롤 할 수 있다.

props.fav신에 {fav}로 간편히 쓸 수 있다.

console.log(props)를 해보면

props 안에 fav라는 object가 들어있다는 걸 알 수 있다.

그 fav를 쓰기 위해서는 argument로 (function의 괄호 안에) props를 가져와서

{props.fav}로 쓸 수도 있지만

{fav}를 argument로 가져와서 {fav}로 쓸 수 도 있다.

옷장.상자 대신 {상자}라고 써서 옷장안에 들어있는 상자를 바로 쓸 수 있는 느낌

- Component has to have uppercase. 

JSX(2) : How to add Dynamic Data with component

임의로 Array를 만들었다.

Array.map 기능은 array의 각 아이템에 접근할 수 있게 도와주는 기능이다.

map을 이용해서 코드를 짜준다.

dish는 foodIlike 이라는 array에 담긴 모든 item 각각을 의미한다.

item마다 이미 name과 image를 가지고 있으므로

그것을 이용해서 props를 만들어 주는 것. item이 가지고 있는 name이라는 정보가 name이라는 props가 되었고

item이 가지고 있는 image가 picture이라는 props가 되었다.

img src 밑에 줄이 쳐진 것은 alt 항목이 없어서 그렇다. alt="hot coffee"추가해주면 없어진다.

Food Component에서 이 props들을 받아서 사용한다.

결과물은 이렇게 나온다.

Array에 넣은 만큼 반복되고 있다.

 

작동은 잘 되지만 이런 에러가 뜬다. react에서는 모든 elements가 unique해야하기 때문인데, array의 각 요소마다 id를 추가해주면 에러는 사라진다.

key prop 추가된 모습

* key prop : React internal use

JSX(3) : Prop-types, How to check if I have right one or not?

먼저 prop-types를 설치한다. 이것은 우리가 prop-type을 잘 설정했는지 체크하도록 도와준다.

$ npm i prop-types

설치가 잘 됐다.

Array의 elements에 각각 rating(점수)를 추가한다.

ex ) rating: 5

이 rating 항목은 string이 아니라 number로 되어있다.

prop-types를 import 해주고 rating을 Component에 포함시켜서 사용도 한다.

이 때 나는 괜찮았는데 module not found라는 알 수 없는 에러가 나면

$ npm i

을 하고 server를 재시작하면 된다. 강의에서 알려준 팁.

그리고 나서 아래 코드를 적어준다. 각 prop가 어떤 타입이어야 하는지 적어주는 것이다. 오류가 나는 것을 보려고 일부러 rating을 number가 아니라 string이어야 한다고 적었다.

그러면 친절하게도 잘못적은 부분을 캐치하여 알려준다.

그런데 만약에 이런 에러가 뜨지 않고 

이런 에러가 뜨면서

작성한 코드에 밑줄이 생긴다면 위의 p를 대문자로 적었을 가능성이 크다. 에러를 읽어봐도 Did you misspell the property assignment? 라고 물어보고 있다. 구글에 검색해보니 꽤 자주들 하는 실수 인 것 같다. p는 소문자로, T는 대문자로 적어야 react가 인식한다.

isRequired는 말 그대로 필수적으로 요구된다는 뜻이다.

array의 element 중에 rating 항목이 없는 element가 있다고 가정하면

❶ rating: PropTypes.number.isRequired

❷ rating: PropTypes.number

 

❶과 같이 작성한 경우는 에러가 나겠지만

❷와 같이 작성한 경우에는 에러가 나지 않는다. (rating이 number인 때와 undefined일 때 모두를 수용한다.)

 

그러나 rating이 number가 아니라 string 등 다른 type으로 되어있는 경우에는

두 가지 경우 모두 에러를 발생시킨다.