배열 렌더링 하기

react에서 배열을 렌더링 하는 방법에 대해 알아보자.

첫 번째 방법은 일일이 배열에서 값을 가져오는 방법이다.

import React from "react";

const UserList = () => {
  const users = [
    {
      id: 1,
      username: "Kim",
      age: 20
    },
    {
      id: 2,
      username: "Lee",
      age: "30"
    },
    {
      id: 3,
      username: "Choi",
      age: "40"
    }
  ];
  return (
    <>
      <p>
        username: {users[0].username}, age: {users[0].age}
      </p>
      <p>
        username: {users[1].username}, age: {users[1].age}
      </p>
      <p>
        username: {users[2].username}, age: {users[2].age}
      </p>
    </>
  );
};

export default UserList;

위의 방법은 반복되는 코드가 많기 때문에 p태그 부분을 컴포넌트로 바꿔 반복을 줄일 수 있다.

import React from "react";

const User = ({ user }) => {
  return (
    <p>
      username: {user.username}, age: {user.age}
    </p>
  );
};

const UserList = () => {
  const users = [
    {
      id: 1,
      username: "Kim",
      age: 20
    },
    {
      id: 2,
      username: "Lee",
      age: "30"
    },
    {
      id: 3,
      username: "Choi",
      age: "40"
    }
  ];
  return (
    <>
      <User user={users[0]} />
      <User user={users[1]} />
      <User user={users[2]} />
    </>
  );
};

export default UserList;

위와 같은 방식으로 컴포넌트를 사용해 반복을 줄였지만 배열의 요소가 추가되거나 삭제되는 상황에서 동적으로 변화를 줄 수가 없다. 또한 user의 갯수가 200개가 된다면 컴포넌트를 200개를 넣어줘야한다. 매우 비효율적이기 때문에 배열의 map 메소드를 사용하여 동적인 배열을 렌더링을 시켜준다.

import React from "react";

const User = ({ user }) => {
  return (
    <p>
      username: {user.username}, age: {user.age}
    </p>
  );
};

const UserList = () => {
  const users = [
    {
      id: 1,
      username: "Kim",
      age: 20
    },
    {
      id: 2,
      username: "Lee",
      age: "30"
    },
    {
      id: 3,
      username: "Choi",
      age: "40"
    }
  ];
  return (
    <>
      {users.map(user => (
        <User user={user} />
      ))}
    </>
  );
};

export default UserList;

이제 동적인 배열을 렌더링하였다 하지만 map을 이용한 반복작업을 했을 경우 key값이 필요하다.

따라서 key props을 설정해야한다. 여기서 key의 값은 고유한 값으로 설정을 해줘야한다.
여기서는 user의 id값이라는 고유한 값이 있기 때문에 user.id를 넣어주면 된다.

import React from "react";

const User = ({ user }) => {
  return (
    <p>
      username: {user.username}, age: {user.age}
    </p>
  );
};

const UserList = () => {
  const users = [
    {
      id: 1,
      username: "Kim",
      age: 20
    },
    {
      id: 2,
      username: "Lee",
      age: "30"
    },
    {
      id: 3,
      username: "Choi",
      age: "40"
    }
  ];
  return (
    <>
      {users.map(user => (
        <User user={user} key={user.id} />
      ))}
    </>
  );
};

export default UserList;