-
#2 JSX & Props프론트엔드/react(노마드코더) 2020. 2. 18. 18:03
1. JSX 란, 리액트에만 있는 개념으로, 리액트 컴포넌트를 html 화 하는 개념을 뜻한다.
컴포넌트에 있는 html 형식으로 된 <div> <h1> 등과같은 것들은 사실 html이 아니라, html 화 시키기 전에 리액트 자체적으로 만든 코드들이라고 보면 된다. 이 일련의 과정을 JSX라고 보면 된다.
2. 컴포넌트 만들기
src/Potato.js 파일 생성 후, 아래와 같이 입력 한다.
import React from 'react'; function Potato() { return ( <h3>I Love Potato</h3> ) } export default Potato;
그 후, 아래와 같이 App.js 에서 Potato 컴포넌트를 import 하여 사용한다.
import React from 'react'; import Potato from "./Potato"; function App() { return ( <div> <h1>Hello!</h1> <Potato /> </div> ); } export default App;
** 특이 사항은, index.js 에 있는 <App /> 부분은 2개 이상을 사용 할 수 없다. 따라서, 모든 컴포넌트들은 App.js안에 들어가야 한다.
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
3. props 개념
편의 상, 위 컴포넌트를 다시 App.js로 옮겨 놓았다. props란 Apps 의 컴포넌트 값을 하위 실제 컴포넌트에 전달 해 주는 역할을 한다. 여기서 부모 컴포넌트인 App에서 Food -> fav라는 props를 정의하였고 이 fav가 하위 컴포넌트인 Food에 값을 전달해 준다. 여기서 function Food({ fav })는 (props.fav)와 같은 의미이다.
하지만, 아래 예시는 적절하지 않다. 하나씩 노가다로 값을 넣어줘야하는데, 실제 API를 통해 값을 받아와서 동적으로 컴포넌트 값이 바뀌어야 하기 때문이다.
import React from 'react'; function Food({ fav }) { return ( <h3>I like {fav}</h3> ) } function App() { return ( <div> <h1>Hello!</h1> <Food fav="kimchi" /> <Food fav="ramen" /> <Food fav="samgyupsal" /> <Food fav="chukumi" /> </div> ); } export default App;
4. javascript에서의 map 함수 이해.
const friends = ["kim", "lee", "park", "yoo"]
friends.map(function(friend){return friend + "♥")}
이면 return 값은 ["kim ♥", "lee ♥", "park ♥", "yoo ♥"] 가 된다.이 뜻은, map이라는 함수는 배열 각 각의 값(각 object)에 추가로 어떤 값을 넣을 수 있는 기능을 뜻한다. 여기서, function(friend)의 friend는 각 각의 배열 값을 뜻한다. 보면 쉽게 이해 됨.
5. props와 map을 연동하기 ★★★★★
이전에 처음 공부했을 때는 이부분이 잘 이해가 안되었는데, 다른 언어 공부를 하고 다양한 경험을 더 해보니 이제야 이해가 잘된다. 이부분이 바로 JSON의 API 값을 화면에 HTML값으로 보여주는 부분이니 아주 중요하다.
일단 임의로, API 값을 서버에서 받아오는게 아니라, 직접 입력해서 보여주는 식으로 진행 하겠다.
const foodILike의 배열은 API 값이라고 보면 된다. 이 API값을 어떻게 화면에 보여줄 것인가.
쉽게 생각 하면 아래 프로세스대로 진행하면된다.
1) foodILike(API data)을 하위 컴포넌트 값에 넣어야 한다.
2) 하위 컴포넌트는 아래에서 Food에 해당 한다.
3) App 컴포넌트 부분에 아래와 같이 입력 (이 부분을 함수로 따로 빼서 함수값을 넣어도 된다.)
foodILike.map(dish =>
<Food name={dish.name} picture={dish.image} />
)
4) Food 컴포넌트에 3)항목에 정의된 props를 반영
import React from 'react'; function Food({ name, picture }) { return ( <div> <h2>I like {name}</h2> <img src={picture} /> </div> ) } const foodILike = [ { name: "Kimchi", image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg" }, { name: "Samgyeopsal", image: "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg" }, { name: "Bibimbap", image: "http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb" }, { name: "Doncasu", image: "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg" }, { name: "Kimbap", image: "http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg" } ]; function App() { return ( <div> {foodILike.map(dish => ( <Food name={dish.name} picture={dish.image} /> ))} </div> ); } export default App;
6. props 값 검증하기
props 값이 누락되거나 다른 변수명을 쓰는 오류를 막기 위해 검증이 필요하다. 먼저 npm i prop-types 를 통해 설치하자.
그 후, Food 컴포넌트 하단에, Food.propTypes를 넣고 각 props값에 필요한 값들을 넣어 준다.
1) string , number 와 같이 특성들을 지정해줄 수 있다. 이 외에도 다양하게 있으니, 공식 문서를 참조해보자.
2) isRequired는 필수 값을 뜻한다. 이 값이 없으면 필수는 아니다.
function Food({ name, picture, rating }) { return ( <div> <h2>I like {name}</h2> <h4>{rating} / 5.0</h4> <img src={picture} alt={name} /> </div> ); } Food.propTypes = { name: PropTypes.string.isRequired, picture: PropTypes.string.isRequired, rating: PropTypes.number }
7. 해당 강의 App.js 최종 코드
import React from "react"; import PropTypes from "prop-types"; const foodILike = [ { id: 1, name: "Kimchi", image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg", rating: 5 }, { id: 2, name: "Samgyeopsal", image: "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg", rating: 3.9 }, { id: 3, name: "Bibimbap", image: "http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb", rating: 4.2 }, { id: 4, name: "Doncasu", image: "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg", rating: 3.5 }, { id: 5, name: "Kimbap", image: "http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg", rating: 4.7 } ]; function Food({ name, picture, rating }) { return ( <div> <h2>I like {name}</h2> <h4>{rating} / 5.0</h4> <img src={picture} alt={name} /> </div> ); } Food.propTypes = { name: PropTypes.string.isRequired, picture: PropTypes.string.isRequired, rating: PropTypes.number } function App() { return ( <div> {foodILike.map(dish => ( <Food key={dish.id} name={dish.name} picture={dish.image} rating={dish.rating} /> ))} </div> ); } export default App;
'프론트엔드 > react(노마드코더)' 카테고리의 다른 글
#4 Making the Movie App (0) 2020.02.19 #3.State (0) 2020.02.19 #1 setup (0) 2020.02.18