React 21 기초 List Key

직접 웹페이지를 만들때 반복되는 HTML DOM 을 사용하고 할때 다음과 같이 사용했습니다

let _list_html_dom;

for(let i = 0; i < 10; i++){

   _list_html_dom+=`<li>${i}</li>`;
}

const ul_parents = document.querySelector("#ul_li");
ul_parents.appendChild(_list_html_dom);

이런식으로 동적 Html 을 조작해서 만들었을 것입니다 리액트에도 똑같이 이런것이 존재합니다 다만 HTML 을 저런식으로 직접 하나하나 컨트롤하지 않은 특징이 있습니다

특정 숫자를 받아서 렌더링 하는 리액트 컴포넌트

import React from "react";
import { useState } from "react";

function Number_list2(props){

    const [number , setNumbers] = useState([1 ,2, 3, 4, 5, 6, 7, 8, 9 , 10])


    const li_childrens = number.map(x => {
        

        return <li>{x}</li>
    })

    const btn_add_number = (event) => {
        setNumbers((preNumber) => { return preNumber.map(x => x +=1) })
    }



    return (
        <div>
        <ul>{li_childrens}</ul>
        <button onClick={btn_add_number}>값 올리기</button>
        </div>
    )
}

export default Number_list2;

이 리액트 컴포넌트는 초기 number 배열로 숫자를 li 태그로 만들어서 ul 의 child 로 만드는 리액트 컴포넌트입니다 그리고 버튼을 누르면 이전 number 에 +1 값을 해서 return 해서 새로운 li child 를 만들게 됩니다 간단한 코드입니다 그리고 HTML 을 직접 조작할 이유도 없어서 매우 깔끔한 코드가 되었습니다

key

그런데 이때 웹페이지에서 개발자 도구를 열게 되면 다음과 같은 경고가 발생합니다 Number_list2.js:17 Warning: Each child in a list should have a unique “key” prop. 즉 같은 배열에 있는 리액트 컴포넌트는 유일한 key 값이 필요하다는 뜻입니다

unique 한 key 값 부여

const li_childrens = number.map(x => {
    

    return <li key = {x.toString()}>{x}</li>
})

이때 unique 한 key 값을 주는 방법은 지금과 같이 동일한 배열로 들어가는 리액트 컴포넌트가 유일한 key 값을 가질 수 있도록 지금과 같이 key 라는 props 를 주어서 유일값을 만들어냅니다

그럼 key 가 필요한 이유

이처럼 key 가 필요한 이유는 가상돔의 성능을 이유로 들수 있습니다

1. 추적용이 - key 를 사용하게 되면 리액트는 업데이트 때마다 어떤 리액트 컴포넌트가 업데이트 발생했는데 추적이 용이합니다

2. 성능 - 1번과 비슷한 사유입니다 추적이 용이하니 어떤 리액트 컴포넌트를 업데이트 해야 할지 금방 판단하게 됩니다

만약 동일한 리액트 컴포넌트 리스트에 key 가 중복이 발생한다면 리액트는 물론 변경이 일어난 컴포넌트를 찾아내서 재 렌더링을 시도할 것이지만 그만큼 유니크한 key 에 비해서는 성능저하가 일어낧 수 밖에 없는 구조입니다

오늘은 react 의 list 에 대해서 알아보았습니다