[React] Props와 map()으로 리스트 렌더링하기 (key가 필요한 이유)

Props란?

props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법이다.

리액트에선 하나의 컴포넌트를 여러번 재사용할 수 있는데, 이때 각각 다른 데이터를 전달하기 위해 props를 사용한다.

아래 이미지와 같이 부모 컴포넌트인 UserList가 user 데이터를 자식 컴포넌트에게 전달하는것과 같은 방식이다.

▶ 부모 컴포넌트 UserList가 user={user}를 자식 컴포넌트 User에게 전달하여 자식 컴포넌트가 해당 데이터를 props로 사용

---

예제코드

아래 코드는 사용자 목록을 출력하는 코드로, 하나의 User 컴포넌트를 여러 데이터에 재사용하는 예제코드이다.

• user 배열에 사용자 정보 저장
• map() 함수 사용하여 배열을 하나씩 반복
• 반복돌며 User 컴포넌트에 user 객체를 props로 전달

// 내부에서 사용할 함수
function User({user}){
    return(
        <div>
            <b>{user.userid}</b> <span>({user.name})</span>
        </div>
    )
}

// 내보낼 함수 (외부)
function UserList() {
    const users = [
        { id: 1, userid: "apple", name: "김사과", email: "apple@apple.com" },
        { id: 2, userid: "banana", name: "반하나", email: "banana@banana.com" },
        { id: 3, userid: "orange", name: "오렌지", email: "orange@orange.com" }
    ]

    return(
        <div>
            {/* 내부사용함수 가져와서 사용하기 */}
            {/* map함수 사용 */}
            {
                users.map((user) => (
                    <User user={user}/>
                ))
            }
        </div>
    )
}

export default UserList

---

코드 실행결과

위 코드를 실행하면 화면에선 정상적으로 사용자 목록이 출력된다.

apple (김사과)
banana (반하나)
orange (오렌지)

 

하지만 F12로 콘솔창을 확인해보면 아래와 같은 경고가 나타난다. 

---

❓ 왜 이런 경고가 발생하는걸까?

리액트는 화면을 다시 그릴 때 전체를 새로 만드는것이 아닌 VDOM을 이용해 변경된 부분만 실제 DOM에 반영한다.

이 과정에서 리스트안에 각 컴포넌트를 구분하기 위한 고유식별자 key가 필요하다.

 

하지만 위 코드에는 key가 없기 때문에

리액트는 어떤 컴포넌트가 추가되었는지, 삭제되었는지, 순서가 변경되었는지 정확히 판단할 수 없다.

그래서 아래와 같은 경고문구가 나타나게된다.

(Each child in a list should have a unique "key" prop.)

---

💡해결 방법

경고를 해결하려면 각 데이터가 가지고 있는 고유한 값을 key로 전달해주면 된다.

{
    users.map((user) => (
        <User
            key={user.id}
            user={user}
        />
    ))
}

위 코드를 보면 user.id를 사용하여 중복되지 않는 값을 key에 저장하여 리액트가 각각의 컴포넌트를 정확히 구분할 수 있도록 수정해주었다.

이렇게 key값을 추가해주면 콘솔창에서 경고메세지가 사라지는것을 확인할 수 있다.

---

Key와 Props의 역할

처음엔 user와 key모두 컴포넌트에 전달되는 값처럼 보여 두가지가 비슷해보이기도 했다.

하지만 공부해보니 두가지의 역할은 분명히 달랐다.

• user: 자식 컴포넌트에서 사용하는 데이터(Props)
• Key: 리액트가 리스트를 구분하기 위해 내부적으로 사용하는 값

<User
    key={user.id}
    user={user}
/>

설명한 코드예제중 일부인 위 코드를 보면 user는 User 컴포넌트에서 사용하는 데이터이고,

key는 리액트가 VDOM을 비교할 때 사용하는 고유한 식별자이다.

 

다시말해, key는 리액트 내부에서만 사용되기 때문에 일반적인 props처럼 컴포넌트 내부에선 사용할 수 없다.