[React] Study #10 | 배열 렌더링, key의 중요성

💡IDEA

1. 그냥 코드를 작성 (따로 정리하지 않겠음, 재사용할 수 없어서 ㅜ )
2. 한파일에 여러개의 컴포넌트 선언

 

1️⃣ 배열이 고정적일 경우, 배열의 인덱스를 하나하나 조회해가면서 렌더링하는 방법 (정적인 배열)

import React from 'react'

function User({user}) {
    return(
        <div>
            <span>{user.name}</span>
            <span>{user.age}</span>
        </div>
    )
}

function UserList() {

    // 렌더링을 위한 배열
    const users = [
        {id: 1, name: 'John', age:19},
        {id: 2, name: 'Car', age:20},
        {id: 3, name: 'lee', age:14},
    ];

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

export default UserList

 

2️⃣ 동적인 배열을 렌더링

• 자바스크립트 배열의 내장함수 map() 을 사용

💡 map() 함수?

• 배열안에 있는 각 원소를 변환하여 새로운 배열을 만들어 준다.
• 리액트에서 동적인 배열을 렌더링해야 할 때는 이 함수를 사용하여 일반 데이터 배열을 리액트 앨리먼트로 이루어진 배열로 변환해주면 된다!

import React from 'react'

function User({user}) {
    return(
        <div>
            <span>{user.name}</span>
            <span>{user.age}</span>
        </div>
    )
}

function UserList() {

    const users = [
        {id: 1, name: 'John', age:19},
        {id: 2, name: 'Car', age:20},
        {id: 3, name: 'lee', age:14},
    ];

    return (
        <div>
            {/* map() 함수를 사용 */}
            {users.map(user => (
                <User user={user} />
            ))}
        </div>
    )
}

export default UserList

 

 

 

🚫 이때 주의해야할 점이있다, 리액트에서 배열을 렌더링할 때는 key라는 props를 설정하는 것!

• key 값은 원소들마다 가지고 있는 고유값으로 설정해야한다.
• 만약 배열을 렌더링 할때, key 설정을 하지 않게 된다면, 기본적으로 index 값을 key로 사용하게 되고, 경고 메세지가 뜨게 된다.
• 각 고유 원소에 key가 있어야만 배열이 업데이트 될때 효율적으로 렌더링이 될 수 있다.
• 지금의 경우에는 id가 고유 값임!

import React from 'react'

function User({user}) {
    return(
        <div>
            <span>{user.name}</span>
            <span>{user.age}</span>
        </div>
    )
}

function UserList() {

    const users = [
        {id: 1, name: 'John', age:19},
        {id: 2, name: 'Car', age:20},
        {id: 3, name: 'lee', age:14},
    ];

    return (
        <div>
            {/* 배열을 렌더링할때, key라는 props를 설정해주기!! */}
            {users.map(user => (
                <User user={user} key={user.id}/>
            ))}
        </div>
    )
}

export default UserList

 

• 만약, 배열안의 원소가 가지고 있는 고유값이 설정이 안되어있다면 map() 함수를 사용할 때 설정하는 콜백함수의 두번째 파라미터 index를 key로 사용하면 된다.

<div>
  {users.map((user, index) => (
    <User user={user} key={index} />
  ))}
</div>

 

 

➰ Key의 존재유무에 따른 업데이트 방식

1️⃣ key가 없을 경우

• 비효율적인 업데이트
• 배열들 사이에 새로운 값을 삽입 혹은 삭제하고 싶을 경우, 배열의 모든 인덱스의 값들에 변동이 일어나게 된다.

2️⃣ key가 있을 경우

• 효율적인 업데이트
• 배열들 사이에 새로운 값을 삽입 혹은 삭제할때, 수정되지 ㅇ낳는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제할 수 있다.
• 때문에, 배열을 렌더링 할 떄에는 고유한 key 값이 있는 것이 중요
• 만약 배열안에 중복되는 key가 있을 경우, 렌더링 시에 오류메시지가 콘솔에 나타나게 되며, 업데이트가 제대로 이루어 지지 않게 된다.

 

---

 

Reference

https://react.vlpt.us/basic/11-render-array.html