노마드 코더 강의를 통해 공부한 내용을 정리한다.
ReactJS로 영화 웹 서비스 만들기
안에 작성한 property가 object 로 food component 에 전달된다.
import React from 'react';
function Food(props) {
console.log(props);
return <h1>I like {props.fav}</h1>;
}
function App() {
return (
<div>
<h1>Hello!</h1>
<Food
fav="kimchi"
something={true}
lalala={["hello", 1, 2, 3, 4, true]}
/>
</div>
);
}
export default App;
위처럼 object 로 한번에 받는게 아닌 개별적으로도 받을 수 있다.
food component 에 fav 라는 이름의 property를 kimchi 라는 value 를 보내준다.
import React from 'react';
function Food({fav}) {
return <h1>I like {fav}</h1>;
}
function App() {
return (
<div>
<h1>Hello!</h1>
<Food fav="kimchi" />
</div>
);
}
export default App;
넘겨받을 때 {} 안에 사용할 property object 의 name 을 적어주면 된다.
friends = ["dal", "mark", "lynn", "japan guy"]
friends.map(friend => {return friend + "*"})
//result
//["dal*", "mark*", "lynn*", "japan guy*"]
//return 결과 값으로 리스트가 만들어져서 반환된다.
map : list 의 각 item 으로 function 을 실행한 후 list 를 리턴하는 javascrip 함수이다.
import React from 'react'
function Food({ name, picture }) {
return (
<div>
<h2>I like {name}</h2>
<img src={picture} />
</div>
);
}
const foodILike = [
{
name: "Kimch",
image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.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"
}
];
function App() {
return (
<div>
{foodILike.map(dish => (
<Food name={dish.name} picture={dish.image} />
))}
</div>
);
}
export default App;
Warning: Each child in a list should have a unique "key" prop.
react 에서는 element 가 많을 경우 고유한 key 라는 것을 정해주어야 한다.
foodILike 의 각 object 에 id 를 추가해 주면 된다.
img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
리액트에서 코드 규칙을 관리할때, img 요소에 alt 라는 속성을 주지 않아서 생기는 경고이다.
import React from 'react'
function Food({ name, picture }) {
return (
<div>
<h2>I like {name}</h2>
<img src={picture} alt=""/>
</div>
);
}
const foodILike = [
{
id: 1,
name: "Kimch",
image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg"
},
{
id: 2,
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"
},
{
id: 3,
name: "Doncasu",
image:
"https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg"
}
];
function App() {
return (
<div>
{foodILike.map(dish => (
<Food key={dish.id} name={dish.name} picture={dish.image} />
))}
</div>
);
}
export default App;
기본적인 react component 형태가 있다.
key prop 는 Food 에서 사용되지 않는데 이것은 기본적으로 react 내부에서 사용하기 위한것이다.
image element 는 alt prop 가 반드시 있어야 한다.
- 이건 시각 장애인들을 위한것이라 한다.
- https://www.pegs.com/blog/why-and-how-you-should-include-alt-text-on-your-website-for-visually-impaired-audience//
import React from 'react'
const foodILike = [
{
id: 1,
name: "Kimch",
image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg"
},
{
id: 2,
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"
},
{
id: 3,
name: "Doncasu",
image:
"https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg"
}
];
function Food({ name, picture }) {
return (
<div>
<h2>I like {name}</h2>
<img src={picture} alt={name}/>
</div>
);
}
function App() {
return (
<div>
{foodILike.map(dish => (
<Food key={dish.id} name={dish.name} picture={dish.image} />
))}
</div>
);
}
export default App;
picture 를 보내야 되는데 image 를 보낸다거나 사람은 종종 실수를 할 수 있다.
그러므로 내가 원하는 property 가 내가 갖고 있는 property 인지 항상 점검할 필요가 있다.
https://ko.reactjs.org/docs/typechecking-with-proptypes.html/
prop-types 설치.
npm i prop-types
prop-types 는 내가 전달받은 props 가 내가 원하는 props 인지를 확인해 준다.
Prop-types 는 다양한걸 체크할 수 있다.
- array, boolean, true, false, object, number, string 등
import React from "react"
import PropTypes from "prop-types"
const foodILike = [
{
id: 1,
name: "Kimch",
image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg",
rating: 5
},
{
id: 2,
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.9
},
{
id: 3,
name: "Doncasu",
image:
"https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg",
rating: 4.8
}
];
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;
Food.propTypes = {
name: PropTypes.string.isRequired,
picture: PropTypes.string.isRequired,
rating: PropTypes.number
}
Food.propTypes 설명