Node.js 클론코딩 실습(3)
2023. 5. 5. 15:33ㆍ카테고리 없음
1. Potato 컴포넌트 만들기(별도로 또는 App.js안에)
1) src 폴더 밑에 Potato.js파일 만들기
2) Potato.js파일을 다음과 같이 작성
//jsx(HTML + javascript)를 이해하기 위한 import
import React from 'react'
//컴포넌트는 대문자로 작성해야 함
function Potato(){
//이것은 html이 아니고 jsx이다
return <h3>I love potato</h3>;
}
//이놈을 추가해야 함
export default Potato;
3) 생성한 컴포넌트는 App 컴포넌트 안에 넣어야 한다
| 변경전 | 변경후 |
|
import React from "react";
function App() {
return (
<div>
<h1>Hello</h1>
</div>
);
}
export default App;
|
import React from "react";
import Potato from "./Potato";
function App() {
return (
<div>
<h1>Hello</h1>
<Potato/>
</div>
);
}
export default App;
|
4) 별도의 파일을 만들지 않고 App.js 파일 안에 바로 만들 수 있다
|
import React from "react";
function Potato(){
return <h1>I like potato</h1>;
}
function App() {
return (
<div>
<h1>Hello</h1>
<Potato/>
</div>
);
}
export default App;
|
2. props 개념 : 컴포넌트에서 컴포넌트로 전달하는 데이터
import React from "react";
//fav항목을 출력함
function Food(props)
{
//console.log(props);
return <h1>I like {props.fav}</h1>;
}
function App() {
return (
<div>
<h1>Hello</h1>
<!-- fav, something, papapapa 를 넘겨줌 -->
<Food fav="kimchi" something={true} papapapa={['hello',1,2,3,4,true]} />
</div>
);
}
export default App;
* 다음처럼 사용도 가능하다.
import React from "react";
function Food({fav})
{
//console.log(props);
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;
2. map함수를 이용하여 배열의 반복처리하기
import React from "react";
function Food({name})
{
//console.log(props);
return <h1>I like {name}</h1>;
}
const foodILike = [
{
name : 'Kimchi',
image : 'https://www.aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg'
},
{
name : 'Samgyeopsal',
image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.joongang.co.kr%2Farticle%2F21312352&psig=AOvVaw3Bz7tRPTThOyPi56cIMpua&ust=1683356757357000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCOjUzN_O3f4CFQAAAAAdAAAAABAE'
},
{
name : 'Bibimbap',
image : 'https://t3.ftcdn.net/jpg/01/36/53/36/360_F_136533641_FDSXM9W8HovI4OWy8w1h28qEnyloF4LL.jpg'
},
{
name : 'Doncasu',
image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fent.sbs.co.kr%2Fnews%2Farticle.do%3Farticle_id%3DE10004919274&psig=AOvVaw08cML932GYRJeeAFA4EQxD&ust=1683356874016000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCPC2uJfP3f4CFQAAAAAdAAAAABAE'
},
{
name : 'Kimbap',
image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fstock.adobe.com%2Fkr%2Fsearch%3Fk%3D%25EA%25B9%2580%25EB%25B0%25A5&psig=AOvVaw2eH7dvRcJuRRRf4bQSS9Aa&ust=1683356891119000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCIjet6DP3f4CFQAAAAAdAAAAABAE'
}
];
function App() {
return (
<div>
{foodILike.map(dish => (<Food name={dish.name} />))}
</div>
);
}
export default App;
* 이미지까지 나오게 하려면
import React from "react";
function Food({name, picture})
{
//console.log(props);
return (
<div>
<h2>I like {name}</h2>
<img src={picture} />
</div>
);
}
const foodILike = [
{
name : 'Kimchi',
image : 'https://www.aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg'
},
{
name : 'Samgyeopsal',
image : 'https://mblogthumb-phinf.pstatic.net/MjAxODAxMTFfMjQz/MDAxNTE1NjY0NTUwMTQ2.WIRsiJ0-fogoxvHZpgnnR3jWZqnTO9BfgnjIkd5iAPIg.toj9m8hOTjZfenFhxc0KlgQyzbcTOhccR3y5ft9YwVUg.PNG.sungjin972/1.png?type=w800'
},
{
name : 'Bibimbap',
image : 'https://t3.ftcdn.net/jpg/01/36/53/36/360_F_136533641_FDSXM9W8HovI4OWy8w1h28qEnyloF4LL.jpg'
},
{
name : 'Doncasu',
image : 'https://media.istockphoto.com/id/1134158942/ko/%EC%82%AC%EC%A7%84/%EB%8F%BC%EC%A7%80%EA%B3%A0%EA%B8%B0-%EB%8F%88%EA%B0%80%EC%8A%A4.jpg?s=612x612&w=is&k=20&c=67QpYveG7XxF3qhduJbp7pJA96fCK8d217xBeTXz5V4='
},
{
name : 'Kimbap',
image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fstock.adobe.com%2Fkr%2Fsearch%3Fk%3D%25EA%25B9%2580%25EB%25B0%25A5&psig=AOvVaw2eH7dvRcJuRRRf4bQSS9Aa&ust=1683356891119000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCIjet6DP3f4CFQAAAAAdAAAAABAE'
}
];
function App() {
return (
<div>
{foodILike.map(dish => (<Food name={dish.name} picture={dish.image} />))}
</div>
);
}
export default App;
* map안의 임시 함수를 따로 뺄수도 있다
import React from "react";
function Food({name, picture})
{
//console.log(props);
return (
<div>
<h2>I like {name}</h2>
<img src={picture} />
</div>
);
}
const foodILike = [
{
name : 'Kimchi',
image : 'https://www.aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg'
},
{
name : 'Samgyeopsal',
image : 'https://mblogthumb-phinf.pstatic.net/MjAxODAxMTFfMjQz/MDAxNTE1NjY0NTUwMTQ2.WIRsiJ0-fogoxvHZpgnnR3jWZqnTO9BfgnjIkd5iAPIg.toj9m8hOTjZfenFhxc0KlgQyzbcTOhccR3y5ft9YwVUg.PNG.sungjin972/1.png?type=w800'
},
{
name : 'Bibimbap',
image : 'https://t3.ftcdn.net/jpg/01/36/53/36/360_F_136533641_FDSXM9W8HovI4OWy8w1h28qEnyloF4LL.jpg'
},
{
name : 'Doncasu',
image : 'https://media.istockphoto.com/id/1134158942/ko/%EC%82%AC%EC%A7%84/%EB%8F%BC%EC%A7%80%EA%B3%A0%EA%B8%B0-%EB%8F%88%EA%B0%80%EC%8A%A4.jpg?s=612x612&w=is&k=20&c=67QpYveG7XxF3qhduJbp7pJA96fCK8d217xBeTXz5V4='
},
{
name : 'Kimbap',
image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fstock.adobe.com%2Fkr%2Fsearch%3Fk%3D%25EA%25B9%2580%25EB%25B0%25A5&psig=AOvVaw2eH7dvRcJuRRRf4bQSS9Aa&ust=1683356891119000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCIjet6DP3f4CFQAAAAAdAAAAABAE'
}
];
function renderFood(dish){
return <Food name={dish.name} picture={dish.image}/>;
}
function App() {
return (
<div>
{foodILike.map(renderFood)}
</div>
);
}
export default App;
* 그런데, 데이터에는 key값이 있어야 하고, img 태그에 alt 속성을 넣어서 경고를 없애자
import React from "react";
function Food({name, picture})
{
//console.log(props);
return (
<div>
<h2>I like {name}</h2>
<img src={picture} alt={name} />
</div>
);
}
const foodILike = [
{
id : 1,
name : 'Kimchi',
image : 'https://www.aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg'
},
{
id : 2,
name : 'Samgyeopsal',
image : 'https://mblogthumb-phinf.pstatic.net/MjAxODAxMTFfMjQz/MDAxNTE1NjY0NTUwMTQ2.WIRsiJ0-fogoxvHZpgnnR3jWZqnTO9BfgnjIkd5iAPIg.toj9m8hOTjZfenFhxc0KlgQyzbcTOhccR3y5ft9YwVUg.PNG.sungjin972/1.png?type=w800'
},
{
id : 3,
name : 'Bibimbap',
image : 'https://t3.ftcdn.net/jpg/01/36/53/36/360_F_136533641_FDSXM9W8HovI4OWy8w1h28qEnyloF4LL.jpg'
},
{
id : 4,
name : 'Doncasu',
image : 'https://media.istockphoto.com/id/1134158942/ko/%EC%82%AC%EC%A7%84/%EB%8F%BC%EC%A7%80%EA%B3%A0%EA%B8%B0-%EB%8F%88%EA%B0%80%EC%8A%A4.jpg?s=612x612&w=is&k=20&c=67QpYveG7XxF3qhduJbp7pJA96fCK8d217xBeTXz5V4='
},
{
id : 5,
name : 'Kimbap',
image : 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fstock.adobe.com%2Fkr%2Fsearch%3Fk%3D%25EA%25B9%2580%25EB%25B0%25A5&psig=AOvVaw2eH7dvRcJuRRRf4bQSS9Aa&ust=1683356891119000&source=images&cd=vfe&ved=0CBEQjRxqFwoTCIjet6DP3f4CFQAAAAAdAAAAABAE'
}
];
function renderFood(dish){
return <Food key={dish.id} name={dish.name} picture={dish.image}/>;
}
function App() {
return (
<div>
{foodILike.map(renderFood)}
</div>
);
}
export default App;