React - map()을 이용한 컴포넌트 표현

sanha_OvO·2021년 11월 19일

JavaScript React

React

목록 보기

3/13

다시 알아보는 리액트의 강점

지난 번에 알아보았던 리액트의 강점 중 하나는 컴포넌트 기반의 개발이었다.
리액트에선 속성만 바뀐 채 여러번 등장하는 컴포넌트를 다시 재사용하기 편하다.

반복되는 컴포넌트의 표현

그럼 컴포넌트를 이용해서 반복되는 컴포넌트를 표현해보자.

Example.js

import React from "react";

export const List = ({ userinfo }) => {
  return (
    <div>
      <span style={{ fontWeight: "bold" }}>{userinfo.username + " "}</span>
      <span>{userinfo.email}</span>
    </div>
  );
};

const Example = () => {
  const users = [
    {
      username: "sanha",
      email: "sanha_owo@kakao.com"
    },
    {
      username: "kunhee",
      email: "bighead@dd.com"
    },
    {
      username: "taepyung",
      email: "hyosung@qwer.net"
    }
  ];

  return (
    <>
      <List userinfo={users[0]} />
      <List userinfo={users[1]} />
      <List userinfo={users[2]} />
    </>
  );
};

export default Example;

결과

근데 이런식으로 일일이 컴포넌트 추가하고 props지정해주고 하는 일이 노가다일 뿐더러
라이브서버에서 새로운 요소가 생길 경우 직접 컴포넌트를 추가해줄 수도 없는 노릇이다.

이를 위해 배열에서 사용하던 map 메소드가 준비되어 있다!

map()을 이용한 반복표현

Example.js

import React from "react";

export const List = ({ userinfo }) => {
  return (
    <div>
      <span style={{ fontWeight: "bold" }}>{userinfo.username + " "}</span>
      <span>{userinfo.email}</span>
    </div>
  );
};

const Example = () => {
  const users = [
    {
      username: "sanha",
      email: "sanha_owo@kakao.com"
    },
    {
      username: "kunhee",
      email: "bighead@dd.com"
    },
    {
      username: "taepyung",
      email: "hyosung@qwer.net"
    }
  ];

  return (
    <>
      {users.map((user) => (
        <List userinfo={user} />
      ))}
    </>
  );
};

export default Example;

결과

컴포넌트가 복사가 된다고~

map을 잘 이용하면 반복되는 컴포넌트들을 속성만 바꿔 나열해줄 수 있으며, 더 편한 컴포넌트의 재사용을 할 수 있다.

map()과 key

다만 map을 사용해 같은 컴포넌트를 나열할 때 주의할 점이 있다.

바로 key값이 있어야 하는 것.

key값이 없으면 컴포넌트의 수정 및 삭제에 있어서 곤란해진다.
같은 형식의 항목들 중에서 한가지의 항목을 지우려고할 때 특정 항목을 구별할 수 없으면 어지러워 진다....

이 때문에 key는 형제 요소들 사이에서 고유한 값을 가져야 한다.

Example.js

import { React, useState } from "react";

export const List = ({ userinfo, deleteUser }) => {
  return (
    <div>
      <span style={{ fontWeight: "bold" }}>{userinfo.username + " "}</span>
      <span>{userinfo.email}</span>
      <button onClick={() => deleteUser(userinfo.key)}>삭제</button>
    </div>
  );
};

const Example = () => {
  const [users, setUsers] = useState([
    {
      key: 0,
      username: "sanha",
      email: "sanha_owo@kakao.com"
    },
    {
      key: 1,
      username: "kunhee",
      email: "bighead@dd.com"
    },
    {
      key: 2,
      username: "taepyung",
      email: "hyosung@qwer.net"
    }
  ]);

  const deleteUser = (key) => {
    setUsers(users.filter((user) => user.key !== key));
  };

  return (
    <>
      {users.map((user) => (
        <List userinfo={user} deleteUser={deleteUser} />
      ))}
    </>
  );
};

export default Example;