카테고리 없음

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;