[React 기초문법 ] 배열 랜더링하기

array 랜더링하기.

※잘 이해가 안가는 혹은 헷갈리는 react의 기초문법들만 정리하는 중.

 

객체 3개가 있는 users라는 배열이 있다. 이 배열을 이용할 것이다. 그리고 이 내용들을 랜더링 해줘야된다는 가정하에 해보겠다.

const users = [
    {
        id:1,
        username:'velopert',
        email:'public.thxjek@gmail.com'
    },
    {
        id:2,
        username:'tester',
        email:'tester@example.com'
    },
    {
        id:3,
        username:'liz',
        email:'liz@example.com'
    }
]

 

비효율적 방법1.

import React from 'react';

function UserList(){
    const users = [
        {
            id:1,
            username:'velopert',
            email:'public.thxjek@gmail.com'
        },
        {
            id:2,
            username:'tester',
            email:'tester@example.com'
        },
        {
            id:3,
            username:'liz', 
            email:'liz@example.com'
        }
    ];

    //array를 랜더링하는 jsx를 작성
    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[2].email}</span>
            </div>
        </div>
    )
}

export default UserList;

 

방법2.

• User컴포넌트를 하나 추가해준다. 그리고 props로 {user}값을 받아온다.

import React from 'react';

//props로 user값을 받아올 것이다.
function User({user}){
    return(
        <div>
            <b>{user.username}</b><span>{user.email}</span>
        </div>
    );
}
function UserList(){
    const users = [
        {
            id:1,
            username:'velopert',
            email:'public.thxjek@gmail.com'
        },
        {
            id:2,
            username:'tester',
            email:'tester@example.com'
        },
        {
            id:3,
            username:'liz', 
            email:'liz@example.com'
        }
    ];

    //array를 랜더링하는 jsx를 작성
    return(
        <div>
           <User user={users[0]}/>
           <User user={users[1]}/>
           <User user={users[2]}/>
        </div>
    )
}

export default UserList;

그런데, 방법2 같은 경우는 만약 배열이 고정적이라면 상관없겠지만, 배열의 내용이바뀐다면(늘어나거나 줄어듬)? 이렇게 사용하기가 애매할 것이다. 이럴때는 자바스크립트의 내장함수 map이라는 것을 사용한다. 

 

방법3.

• map함수를 사용하여 객체 배열 형태로 있는 배열을 컴포넌트 엘리먼트 배열로 변환을 해주면된다.

import React from 'react';

//props로 user값을 받아올 것이다.
function User({user}){
    console.log(user);
    return(
        <div>
            <b>{user.username}</b><span>{user.email}</span>
        </div>
    );
}
function UserList(){
    const users = [
        {
            id:1,
            username:'velopert',
            email:'public.thxjek@gmail.com'
        },
        {
            id:2,
            username:'tester',
            email:'tester@example.com'
        },
        {
            id:3,
            username:'liz', 
            email:'liz@example.com'
        }
    ];

    //array를 랜더링하는 jsx를 작성
    return(
        <div>
         {
             users.map(
                 user=>(<User user={user}/>)
             )
         }
        </div>
    )
}

export default UserList;

그런데, 여기서 끝이아니다. 콘솔창을 보면 아래와같은 오류가 나와있을것이다.Each child란, 각 <User>를 가르킨다. 그리고,리스크에서는 고유한 key를 써야된다. 즉, 리액트에서는 자식 컴포넌트가 있다면 고유한 key를 가지고있어야된다는 의미이다.

key의 역할은 각 원소들마다 고유값을 줌으로써 나중에 리랜더링 성능을 최적화 할수있도록 도와준다. 지금 코드에서는 각 객체이 가지고있는 고유값은 id이다. 그래서 이 id값을 key로 설정해줘야된다. 그리고 key에다가 index를 넣는것은 되도록 피해야된다. 왜냐하면 key가 있으면 랜더링한 결과물에서 정확히 어떤 key를 가르키고있는지를 알고있으므로써 어떤 새로운 항목이 추가되거나 제거될때 효율적으로 업데이트가 가능하게된다.

 

---

참고자료 :

vlpt홈페이지

fastcampus