[React] map( ) 함수로 컴포넌트 만들기 (+ 컴포넌트 반복하기)

공부 중인 책 예제는 todo App 만들기이다.
완전 간단 예제인데... 뼈문과인 나는 뇌리에 팍팍 들어오지 않아 어려웠다... 힝구리퐁퐁😥
그래서 내가 이해할 수 있는 예제를 만들어보기로 했다!

---

map( ) 함수로 컴포넌트 만들기

1. 데이터 만들기

• MapComponents_practice.jsx

import React from 'react';

const MapComponents_practice = () => {
  const Team = ({ character }) => {
    return <h1>나는 리액트 스터디 팀원 {character}</h1>;
  };

  return (
    <div>
      <h1>방가방가!</h1>
      <h3>공부는 어려워요...ㅠㅠ</h3>
      <Team character="대장" />
      <Team character="미니미니" />
      <Team character="에비츄" />
      <Team character="행복족젭" />
    </div>
  );
};

export default MapComponents_practice;

이렇게 작성하면 새로운 스터디 팀원이 들어올 때마다
< Team character="..." />를 계속 복붙해야 하기 때문에 효율적이지 않다.

100명이 되면 100개를 복사해야하고, 그때마다 props에 다른 값을 번거롭게 입력해야 한다.

일단 리액트 스터디 팀원 4명만 작성하고 이미지까지 넣어봤다. 그리고 대충 무수히 많은 스터디 팀원(데이터)이 있다고 가정하자.

2. map() 함수로 컴포넌트 여러 개 만들기

• 이미지가 추가된 MapComponents_practice.jsx

import React from 'react';
import kingHamsterImage from '../assets/png/kingHamster.png';
import chuuImage from '../assets/png/chuu.png';
import mini2Image from '../assets/png/mini2.png';
import happyjockjjabImage from '../assets/png/happyjockjjab.jpg';

const MapComponents_practice = () => {
  const Team = ({ character }) => {
    return <h1>나는 리액트 스터디 팀원 {character}</h1>;
  };

  const TeamCharacter = [
    {
      character: '인수',
      image: kingHamsterImage,
    },
    {
      character: '한솔',
      image: chuuImage,
    },
    {
      character: '겨레',
      image: mini2Image,
    },
    {
      character: '정선',
      image: happyjockjjabImage,
    },
  ];

  return (
    <div>
      <h1>방가방가!</h1>
      <h3>공부는 어려워요...ㅠㅠ</h3>
      <div>
        {TeamCharacter.map((myCharacter) => (
          <Team character={myCharacter.character} />
        ))}
      </div>
    </div>
  );
};

export default MapComponents_practice;

✔ TeamCharacter에 있는 원소를 하나씩 전달받아 출력하는 함수(TeamCharacter.map((myCharacter))를

✔ map( ) 함수 인자로 전달( => ( )) 한다.

✔ myCharacter에 TeamCharacter 배열 원소가 하나씩 넘어가고, 그 원소는 { character: '...', image: ~Image }와 같은 객체 형태로 MapComponents_practice 컴포넌트에 myCharacter.character로 character props로 넘겨준 것!

하지만... 아직 이미지는 나오지 않는다...
아직 image props를 넘겨주지 않았기 때문이다.
이미지도 잘 나올 수 있게 Team 컴포넌트에 image props도 넘겨줘보자!

3. 이미지도 잘 나오게 하기

결과를 확인해보자!!!