-
ReactJS (3)웹개발/JavaScript 2021. 1. 3. 18:24
* Reusable Components with JSX+Props
· jsx
: component에 정보를 보낼 수 있음,
react가 멋진 이유는 재사용 가능한 component를 만들 수 있다는 점
이 말은 component를 계속해서 반복해서 사용할 수 있다는 것
- component에서 component로, children component로 정보를 보내는 방법
(1) react의 개념: food component에 kimchi라는 value로 prop name을 줌
import React from 'react';
function Food() {
return <h1>I like Potato</h1>;
}
function App() {
return (
<div>
<h1>Hello</h1>
<Food name="kimchi" />
</div>
);
}
export default App;
food component에 fav라는 이름의 property를 kimch라는 value로 줌
import React from 'react';
function Food() {
return <h1>I like Potato</h1>;
}
function App() {
return (
<div>
<h1>Hello</h1>
<Food fav="kimchi" />
</div>
);
}
export default App;
(2) react magic을 이용해서 props를 사용, react magic에서 react는 우리가 전달한 props를 가져가는 일을 함
import React from 'react';
function Food(props) {
console.log(props);
return <h1>I like Potato</h1>;
}
function App() {
return (
<div>
<h1>Hello</h1>
<Food name="kimchi"
something={true}
papapapa={["hello",1,2,3,4,true]} />
</div>
);
}
export default App;
- console
console.log로 나온 object를 말하고, 이 object는 component로 전달 된 모든 props들
-> 이러한 점들이 우리가 react magic을 사용하기 위해 create-react-app이 필요한 이유
내부에서 얻는 방법: props.fav 또는 {fav}
동적 데이터가 있는 component가 있고, 우리는 jsx+props의 힘으로 모두 재사용할 수 있음
import React from 'react';
function Food({ fav }) {
return <h1>I like {fav}</h1>;
}
function App() {
return (
<div>
<h1>Hello</h1>
<Food fav="kimchi" />
<Food fav="ramen" />
<Food fav="samgiopsal" />
<Food fav="chukumi" />
</div>
);
}
export default App;
· jsx (HTML+JavaScript)
우리 component는 대문자로 시작해야하고, 우리의 component로 정보를 보낼 수 있음
* Dynamic Component Generation웹사이트에 동적 데이터를 추가하는 방법
· map: array의 각 item에서 function을 실행하는 array를 가지는 javaScript function이며 그 function의 result를 갖는 array를 줌
ex 1)const friends=["dal", "mark", "lynn", "japan guy"]friends.map(current => { console.log(current); return 0})
또는
friends.map(function(current){
console.log(current);
return 0
})
result 1)
dal
mark
lynn
japan guy
[0, 0, 0, 0]
ex 2)
friends.map(function(friends){
retuen friend + " 💖";
})
result 2)
["dal 💖", "mark 💖", "lynn 💖", "japan guy 💖"]
ex 3) dish는 object!
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:
},
{
name: "Bibimbap",
image:
},
{
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;
* map Recap
import { render } from '@testing-library/react';
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:
},
{
name: "Bibimbap",
image:
},
{
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 renderFood(dish){
console.log(dish);
return <Food name={dish.name} pictures={dish.image}/>
}
function App() {
return (
<div>
{foodILike.map(renderFood)}
</div>
);
}
Warning: Eacj child index.js:1 in a list should have a unique "key" prop.
모든 react의 element들은 유일해야하고 이들을 list 안으로 집어넣을때, 이녀석들은 유일성을 잃어버림
=> item들에 각각 ID를 추가
<Food key={dish.id} name={dish.name} picture={dish.image} />
* Protection with PropTypes
father component로 부터 전달받은 props가 우리가 예상한 props인지를 점검
=> list에 있는 이들 각각에 rating 추가
npm i props-types
: 내가 전달받은 props가 내가 원하는 props인지를 확인해주는 것
string 또는 number 같은 예제 뿐 아니라 array인지,
boolean인지 true인지 false인지 object인지 있는지 없는지 체크할 수 있음
잘 설치되었다면 pakage.json에 "prop-types"가 추가된 것을 확인할 수 있음
import React from 'react';
import PropTypes, { string } 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:
rating: 4.9
},
{
id: 3,
name: "Bibimbap",
image:
rating:4.8
},
{
id: 4,
name: "Doncasu",
image:
"https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg",
rating: 5.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.isRequired
};
function App() {
return (
<div>
{foodILike.map(dish => (
<Food key={dish.id} name={dish.name} picture={dish.image} rating={dish.rating} />
))}
</div>
);
}
export default App;
'웹개발 > JavaScript' 카테고리의 다른 글
ReactJS (5) (0) 2021.01.04 ReactJS (4) (0) 2021.01.04 ReactJS (2) (0) 2020.12.31 ReactJS (1) (0) 2020.12.31 JavaScript로 To Do List 만들기 (0) 2020.12.30
