[React] 리액트 컴포넌트에서 유용하게 사용할 수 있는 메소드 "map()"

01 배열을 이용한 렌더링에는 map() 메소드를 사용.

 

01-1  map() 이란?

 

 

 

01-2  map() 사용

• 새로운 컴포넌트 (Doraemong) 생성. *** 참고 전 게시물 01-4

 

src

• src/Doraemong.js

import React from "react";

const pet = ["강아지", "고양이", "앵무새", "햄스터", "거북이"]

function Pet(props){
    return <h1>귀여운 {props.race}</h1>
}

function Doraemong(){
    return <>
        {pet.map((p) => {
            return <Pet race={p} />
        })}
    </>
}

export default Doraemong

 

src

• src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import Parent from './App';
// import Banana from "./Banana";
// import Carrot from "./Carrot";
import Doraemong from "./Doraemong"

// ReactDOM.render(x, y) : 가상 요소 x 를 y 에다 렌더링 함!
ReactDOM.render(
  <React.StrictMode>
    <Doraemong />
  </React.StrictMode>,
  document.getElementById('root')
);

 

• import Doraemong from "./Doraemong"
• <Doraemong />

 

 

 

 

 

01-3  map() 을 이용해 반복적인 렌더링을 했을 때는 반복되는 컴포넌트에 식별자 key를 추가해야 함.

다 똑같애! 식별해줘!

 

 

key={p} 추가하면 해결!

 

 

 

index 번호 추가

 

src

• src/Doraemong.js

import React from "react";

const pet = ["강아지", "고양이", "앵무새", "햄스터", "거북이"]

function Pet(props){
    return <h1>귀여운 {props.race}</h1>
}

function Doraemong(){
    // map() 메소드의 콜백은 배열 각 요소, 인덱스 번호 순서로 인자를 받음!
    return <>
        {pet.map((p, index) => {
            return <Pet race={p} key={index} />
        })}
    </>
}

export default Doraemong

 

 

 

 

 

 

02 map() 메소드 예제

• foods 배열의 요소를 모두 보여주자! 단 li 를 사용하자!
• 새로운 컴포넌트 (Eco.js) 생성!

 

src

• src/Eco.js

import React from "react"

const foods = ["초밥", "우동", "오꼬노미야끼", "나베", "야키토리", "푸딩"]

function Eco(){
    // 미션 : foods 배열의 요소를 모두 보여주자! 단 li 를 사용하자!
    return <>
        <h1>맛있는 음식 목록</h1>
        <ul>
            {foods.map((element, index) => {
                return <li key={index}>{element}</li>
            })}
        </ul>
    </>
}

export default Eco