배열 렌더링하기(react)

리액트에서 배열 랜더링 하기

 

!포인트!

1. map()함수

2. 컴포넌트 2개 사용

3. 고유 키 값이 있어야 함 (없으면 index 값이 들어감)

 

 

첫번째 방법 그대로 넣기

 

import React from 'react';

function UserList() {
  const users = [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ];
  return (
    <div>
      <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[1].email})</span>
      </div>
    </div>
  );
}

export default UserList;

 

짧은 코드라면 간단하지만 배열이 많아지면 비효율적이다

 

두번째 방법

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: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ];

  return (
    <div>
      <User user={users[0]} />
      <User user={users[1]} />
      <User user={users[2]} />
    </div>
  );
}

export default UserList;

컴포넌트를 한개 더 만들어서 프롭스로 받아와 코드를 줄일 수 있다.

 

세번째 방법

 

import React from 'react'

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

// 컴포넌트 두개 생성가능

export default function UserList() {

    const user = [
        {
            id: 1,
            username: 'one',
            email: 'one@naver.com,'
        },
        {
            id: 2,
            username: 'two',
            email: 'two@naver.com,'
        },
        {
            id: 3,
            username: 'three',
            email: 'three@naver.com,'
        },

    ];

    return (
        <div>
            {user.map(u => (
                <User user={u} key={u.id} />
            ))}



        </div>
    )
}

                                                          출력 값 

 

1. 맵 함수를 사용하여 user 배열안의 객체를 u (작명가능 = " 맵함수로 객체를 복사해서 새로 만들었다고 이해함" ) 로 리액트 엘리먼트로 이루어진 배열로 변환해주면 됩니다.

2. 리액트에서 배열을 랜더링할때 key 라는 프롭스를 고유값으로 지정해줘야 한다 위 코드의 경우는 객체의 프로퍼티중 id 가 고유값이기에 키로 지정가능