React - 배열 렌더링

배열 렌더링

리액트에서는 배열을 어떻게 렌더링하는지에 대해서 알아보자

예를 들어 배열 안에 객체 3개가 들어있고 이 내용을 렌더링 해야 한다고 가정하자.

💡하나의 컴포넌트의 파일에 두개의 컴포넌트를 선언해도 된다. 분리도 가능

만약에 배열의 내용이 고정적이지 않고 늘어나거나 줄어들 때 처리하는 방법은 Javascript의 map함수를 이용해야 한다.

💡코드에 있는 객체배열의 형태를 컴포넌트 엘리먼트의 형태로 변환해주면 된다.

//UserList.js
import React from "react";

function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}

function UserList() {
  const users = [
    {
      id: 1,
      username: "Simon",
      email: "publick.Simon@gmail.com"
    },
    {
      id: 2,
      username: "tester",
      email: "tester@gmail.com"
    },
    {
      id: 3,
      username: "liar",
      email: "liar@gmail.com"
    }
  ];
  return (
    <div>
    {
      users.map(
        user => (<User user={user} key={user.id} />) 
      )
    }
    </div>
  );
}

export default UserList;

💡 여기서 콘솔창을 보게 되면 "each child in a list should have a unique "key" prop."이라고 적혀있을 것이다.
key라는 props의 역할은 각 원소들 마다 고윳값을 줌으로써 나중에 리렌더링 성능을 최적화 할 수 있게 해준다.

위의 예시에서 보면 users의 객체에 보면 id가 고윳값이니까 id값을 key로 설정해줘야 한다.

만약 객체가 key로 사용할 고윳값이 없다면?
map에서 사용하는 콜백함수의 두번째 파라미터에 index값을 사용하면 된다.
하지만, index를 넣으면 단순히 경고만 사라지게 되는 것이지 성능이 좋아지는 것은 아니다.