React 리액트 - 맵(Map)

 

 

FoodContainer

 

 

컨테이너를 사용해 성능을 높이기 위함

 

 

<FoodContainer>

import React from 'react';
import Food from './Food';

const FoodContainer = () => {

  const foods = [ 
  // 배열: 객체들이 순서대로 모여 있는 자료 구조 
  // 객체: 순서가 없는 자료 구조
  {
    id : 1,
    name : "리코타치즈샐러드"
  },
  {
    id : 2,
    name : "떡볶이"
  },
  {
    id : 3,
    name : "신김치생삼겹살"
  },
  {
    id : 4,
    name : "모쯔나베"
  },
  {
    id : 5,
    name : "감자뇨끼"
  }
  ]

  // 1. 위에 있는 값을 받아서 처리 -> 콜백함수
  const foodList = foods.map(({name}, i) => ( // 3. 구조분해 할당으로 가져옴
    <Food key={i} name={name} /> // 4. Food에 컨테이너 name을 넘기고 사용
  ))
  // 2. index와 key를 사용해 클린한 상태로 만들어 사용한다

  return (
    <div>
      {foodList}
    </div>
  );
};

export default FoodContainer;

 

 

<Food>

import React from 'react';

const Food = ({name}) => {
  return (
    <li>
      {name}
    </li>
  );
};

export default Food;

 

 

<결과화면>

 

 

- 기존의 방식과 결과화면은 차이가 없음

- 출력 구조만 변경된 것으로 내용이 많아지는 경우 성능을 높일 수 있음

 

 

ToDoContainer

 

 

할 일 목록 중 완료하지 않은 항목만 화면에 출력 ToDo 컴포넌트로 분리

 

 

<ToDoContainer>

import React from 'react';
import ToDo from './ToDo';

const ToDoContainer = () => {

  const todos = [
    {
      title : "Homework",
      isComplete : true
    },
    {
      title : "Dishwashing",
      isComplete : false
    },
    {
      title : "Vacuuming",
      isComplete : true
    },
    {
      title : "Reading a book",
      isComplete : true
    },
    {
      title : "Workout",
      isComplete : false
    }
  ]

  const todoList = todos
    .filter((todo) => !todo.isComplete)
    .map((todo, i) => <ToDo todo={todo} i={i} />)

  return (
    <div>
      {todoList}
    </div>
  );
};

export default ToDoContainer;

 

 

<ToDo>

import React from 'react';

const ToDo = ({todo, i}) => {
    return (
    <li>
      Yet To Do : {todo.title}
    </li>
  )
};

export default ToDo;

 

 

<결과화면>

 

 

 

https://developernew.tistory.com/431

리액트 React 설치방법 feat. VS Code

https://developernew.tistory.com/435

React 리액트 - Props 프로퍼티 구동원리