React JS로 웹서비스 만들기 #2 JSX & Props

#2.0 Creating your first React Component

React는 모두 Component로 이루어져있다. 

여기서 <App /> 부분에 주목!

Component란?

html을 반환하는 함수이다. 

JSX : 자바스크립트 안의 html

react로 부터 등장한 개념. 

 

새로운 컴포넌트를 더해보자.

BIG NO-NO

JSX 특징 1. react application은 하나의 컴포넌트만 랜더링해야한다. 따라서 Potato는 App 안으로 넣어줘야한다. 

 

#2.1 Reusable Components with JSX + Props

JSX 특징 2. Component에 정보를 보낼 수 있다. -> Reusable한 Component로 이용 가능!

fav는 name이고 kimchi는 property이다. 

 

전달 예제

 

*probs.fav와 {fav}는 같다. es6의 특징. 

 

실행 결과

정리: 

Props: 컴포넌트에 넣게 되는 것들.

이건 argument로 함수에 넣어진다. 

props.fav로 가져오던, {fav}로 가져오던 상관 X. It's up to you!

 

# 2.2 Dynamic component generation

정적인 데이터가 아니라 웹에서 동적으로 데이터를 가져와 렌더링 하고 싶다면?

<App />

<App />

이렇게 몇 개를 적어야 할 지 모를것이다. 이때 사용하는것은 map!

 

map은 array의 각 item에서 function을 실행한다. 그리고 그 결과에 해당하는 array를 나에게 준다. 

 

# 2.3 map recap

list에 오브젝트 넣을때 각각은 uniqueness를 잃는다. 이를 방지하기 위해 id 달아줄것. 

# 2.4 Protection with PropTypes

전달한 props들이 제대로 된 아이템들인지 점검할 필요있다. 유저가 깨진 화면 보는 것 방지하기 위해서. 

npm install prop-types

기대하는 바와 다를 경우 error를 내뿜는다.

항상 모든 것을 체크할 필요는 없다. 그럴경우

rating:propTypes.number 혹은 해당 항목 아예 없애주면 된다

https://reactjs.org/docs/typechecking-with-proptypes.html

Typechecking With PropTypes – React

다른 것 체크하는 방법 위 다큐먼트 보구 이해하기.