🔮 React - 7. 컴포넌트 반복 (Array, Map)

• 리액트에서 배열과 맵은 컴포넌트 렌더링에서 매우 중요한 역할을 합니다.
• 배열은 순서가 '있는' 데이터의 집합으로, 각 요소는 인덱스를 가지고 있습니다.
• 맵은 key와 value를 가지는 구조로, key와 value 쌍으로 이루어져 있으며 key는 중복되지 않는 고유한 값 입니다.

고정 배열 렌더링

🙁 비효율 적인 방법 : 배열 그대로 작성하는 방법

import React from 'react';

const ArrayTest = () => {
  const users = [
    {
      id: 100,
      userName: 'Karly',
      eMail: 'king@naver.com'
    },
    {
      id: 200,
      userName: 'Elastine',
      eMail: 'hoho@gmail.com'
    },
    {
      id: 300,
      userName: 'Kim',
      eMail: 'kim@kakao.com'
    }
  ];
  return (
    <>
      <div>
        <b>{users[0].userName}</b> <span>{users[0].eMail}</span>
      </div>
      <div>
      <b>{users[1].userName}</b> <span>{users[1].eMail}</span>
      </div>
      <div>
      <b>{users[2].userName}</b> <span>{users[2].eMail}</span>
      </div>
    </>
  );
}

export default ArrayTest;

컴포넌트를 만들고 props로 전달

import React from 'react';

const User = (props) => {

  return (
    <>
      <b>{props.user.userName}</b> <span>{props.user.eMail}</span>
    </>
  );
}

const ArrayTest2 = () => {
  const users = [
    {
      id: 100,
      userName: 'Karly',
      eMail: 'king@naver.com'
    },
    {
      id: 200,
      userName: 'Elastine',
      eMail: 'hoho@gmail.com'
    },
    {
      id: 300,
      userName: 'Kim',
      eMail: 'kim@kakao.com'
    }
  ];
  
  return (
    <>
      <div>
        <User user={users[0]}/>
      </div>
      <div>
        <User user={users[1]} />
      </div>
      <div>
        <User user={users[2]} />
      </div>
    </>
  );
}

export default ArrayTest2;

map() 함수 이용

import React from "react";

const MapTest = () => {
  const users = [
    {
      id: 100,
      userName: "Karly",
      eMail: "king@naver.com",
    },
    {
      id: 200,
      userName: "Elastine",
      eMail: "hoho@gmail.com",
    },
    {
      id: 300,
      userName: "Kim",
      eMail: "kim@kakao.com",
    },
  ];
  
  return (
    <>
      {users &&
        users.map((user) => (
          <div key={user.id}>
            <p>{user.userName} : {user.eMail}</p>
          </div>
        ))}
    </>
  );
};

export default MapTest;

useState와 함께 사용하여 데이터 추가 기능 구현

To Do List

import React,{useState} from "react";
import "./App.css";

const IterationSample = () => {
  const [names, setNames] = useState([
    {id: 1, text: '눈사람'},
    {id: 2, text: '얼음'},
    {id: 3, text: '크리스마스'},
    {id: 4, text: '겨울'}
  ]);
  const [inputText, setInputText] = useState("");
  const [nextId, setNextId] = useState(5);
  
  const onChange = e => setInputText(e.target.value);
  
  const onClick = () => {
    const nextNames = names.concat({
      id: nextId,
      text: inputText
    });
    setNextId(nextId + 1);
    setNames(nextNames);
    setInputText(""); // inputText를 비워줌
  }
  const onRemove = id => {
    const nextNames = names.filter(name => name.id !== id);
    setNames(nextNames);
  }
  const namesList = names.map(name => (
    <li key={name.id} onDoubleClick={() => onRemove(name.id)}>{name.text}</li>
  ));

  return (
    <>
      <p className="title-name">To Do List!</p>
      <p>삭제는 해당 항목을 더블클릭 하세요.</p>
      <input type="text" value={inputText} onChange={onChange} />
      <button onClick={onClick}>추가</button>
      <ul>
        {namesList}
      </ul>
    </>
  );
}

export default IterationSample;

.title-name {
  color: royalblue;
  font-size: 2em;
  background-color: orange;
}