목차
접기
728x90
반응형
App.js
import React from "react";
function App() {
return (
<div>
<div>
{foodLike.map((dish) => (
<Food name={dish.name} picture={dish.image} />
))}
</div>
<div>
{animalLike.map((animal) => {
return <Animal name={animal.name} image={animal.image} />;
})}
</div>
</div>
);
}
// 아래 코드들
// ~~~~
// ~~~~
// ~~~~
export default App;
- App에서는 음식과 동물 이름, 사진을 각 배열의 map 함수를 사용해서 필요한 컴포넌트에 props를 전달한다.
- map 함수를 사용할 때, return하는게 하나라면? {} 중괄호를 사용하지 않고 arrow function을 사용할 수 있다.
- HTML에서 JavaScript를 사용하려면 {}중괄호를 여닫아 사용한다.
음식, 동물 배열
const foodLike = [
{
name: "Kimchi",
image:
"http://m.gochoochongak.com/web/product/big/201810/1cf1eb74d9cbb972ee0fd10d7f25e49c.jpg",
},
{
name: "Samgyeopsal",
image:
"https://cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/IZOXUQBP4QVT4ONUPAIDA6347M.jpg",
},
];
const animalLike = [
{
name: "Cat",
image:
"https://lh3.googleusercontent.com/proxy/r5jeZp4_QMUouVDfKBWedaIhumFycKWgYa0LYorDNtIfixsjOBPBj-UH3HXe2Q3qoQhUoQeXCpGQQsC4c37tjoRF2AJo7e4rpzKPUION9QHkoKIoeAE",
},
{
name: "Bird",
image:
"https://image.freepik.com/free-vector/xantus-bird-cartoon-humming-bird-flying-colibri_125446-419.jpg",
},
];
- 아직 서버에서 데이터를 직접 받아오는 방법을 알지 못하기 때문에 임의 데이터 배열을 만들어서 사용한다.
- 각 배열은 name과 image를 property로 가지고 있다.
- 이 배열의 프로퍼티들을 각 컴포넌트의 props로 전달한다.
Component
function Food({ name, picture }) {
return (
<div>
<h3>{name}</h3>
<img src={picture} alt="" />
</div>
);
}
function Animal({ name, image }) {
return (
<div>
<h2>{name}</h2>
<img src={image} alt="" />
</div>
);
}
- 각 컴포넌트에서는 전달 받은 props들을 출력하는 JSX를 반환한다.
- JSX : JavaScript와 HTML을 사용한 문법
- img 태그는 alt property를 빈문자라도 사용해야 한다.
728x90
반응형
LIST
'javascript' 카테고리의 다른 글
자바스크립트로 user agent를 통해 모바일 인식하기 (0) | 2021.04.02 |
---|---|
[ javascript ] map 함수 사용 시, 함수 분할 (0) | 2021.02.07 |
[ javascript ] 연습 문제 풀이 (0) | 2021.02.03 |
[ javascript ] 연습 문제 도전... (0) | 2021.02.02 |
[ javascript ] Array, 배열, 배열 내장 함수. (0) | 2021.02.02 |