2. JSX & PROPS

Component --> HTML을 반환하는 함수

Component를 사용하려면 <Component />형식으로 사용해주어야 한다.

 

react --> component를 사용해서 HTML처럼 작성하려는 경우에 필요하다

위와 같은 조합을 JSX라고 한다(react에서만 유효하다)

JSX = JavaScript + HTML

 

Component를 작성하기 위해서는 import React from "react"를 써주어야만 한다.

왜? 이렇게 하지 않으면 react는 jsx가 있는 component를 사용하는 것을 이해하지 못한다.

 

함수명은 대문자로 시작해야한다.

 

어떻게 사용해줄까?

index.js에 가져와서 사용해주면 될까?

에러 발생 왜? react application이 하나의 component만 랜더링하기 때문이다

여기서 그 하나의 component는 App을 가르킨다.

사용을 해주려면, App.js의 App내부에 선언해주어야한다.

컴파일 결과

??Tomato 어디감

문제점 : App 함수의 return 값을 감싸주는 태그를 선언하지 않았다..

 

div 태그로 감싸주었다

 

컴파일 결과

HTML을 따로 작성해주지 않았는데도 react가 잘 넣어주었다.

 

#2.1 JSX+Props

 

Food 컴포넌트에 fav = 'chicken'이라는 값 입력하고

Food함수에서 파라미터를 출력--> fav:"chicken"이 나온다.

아! 저러한 방식으로 값을 전달해주는 구나 전달해주는 값들을 props라고 하는구나

+ 객체형식으로 전달이 된다

 

값 전달은 OK 그럼 어떻게 하면 fav키의 value인 chicken을 사용할 수 있을까?

ES6를 이용하자

컴파일 결과

Tomato --> chicken으로 변경

 

요렇게 props라는 객체를 받아서 .을 이용해서 사용해주어도 된다.

 

#2.2 Dynamic Component Generation

 

웹사이트에 동적 데이터 추가하기

 

 

foodlike라는 객체를 원소로 가지는 배열을 선언

 

App컴포넌트 안에 {}사용 --> javascript 코드를 실행시켜준다

map함수를 이용해서 Food 컴포넌트에다가 props(name,picture)를 전달해준다

Food 컴포넌트는 전달받은 props를 사용해서 return 값에 적혀있는 것 처럼 반환해준다.

 

왜 map 함수사용?

map 함수는 각 원소를 원하는 대로 변경,수정,선별 하고 조건에 맞는 원소들을 return 해줌으로써

새로운 배열을 만들어준다.

 

map함수를 사용해서 변경된 원소들을 보통은 하나의 변수에 담아준다.

여길 보면, 변수에 담아주는 것이아닌 그냥 foodlike배열을 map함수를 이용한다.

변수에 담아주지 않게되면, 그냥 사라지는 것이 아닐까? 라는 생각에 직접 console.log를 이용해서

map함수를 사용한 결과를 확인해보았다.

 

사라지는 것이아닌 수정된 배열이 출력이 된것을 확인했다.

 

컴포넌트의 반복적인 생산이 필요할땐 map함수 이용

 

App컴포넌트 내부에 map함수를 사용하는 것이 아닌, 외부에서 사용하도록 구현

renderFood를 콜백함수로 등록하면 map함수로 인해 foodlike인자들이 renderFood의 파라미터로 넘겨진다.

 

오류 발견

각각 list 에 존재하는 child는 unique한 key prop을 가져야 한다

--> 뭔소리? 모든 react의 element들은 유일해야한다.

하지만, 이러한 요소들을 list에 집어넣는 순간 유일성은 사라진다.

 

어떻게 해결?

foodlike배열의 각 원소마다 id값을 부여해주고, Food컴포넌트에 부여해준다.

오류가 사라졌다.

 

#2.4 Protection with PropTypes

 

prop-types 설치

prop-types가 하는 일 --> 전달받은 props가 내가 원하는 props인지 확인해준다

콘솔 출력결과 rating은 number이기 때문에 오류가 생김

왜? proptypes에서 rating의 타입을 number가 아닌 string으로 기대하고 있기 때문에

 

어떻게 오류 해결?

--> rating : PropTypes.number.isRequired로 수정하게 되면 오류가 사라진다.

 

isRequired ==> 필수!

 

proptypes를 사용해서 많은 것들이 확인 가능하다

ex) 배열, 불리언(true,false),객체 등

 

컴포넌트.propTyeps에서 propTypes는 다른이름으로 지어주면 안된다--> 왜? react가 확인하지 않기 때문에

 

proptypes로 props에 대해 확인가능 --> 굉장히 유용하다