[React] List와 key의 중요성

List와 key의 중요성

 

리액트에서 리스트 형태로 여러 엘리먼트들을 반환할 때는 각각의 엘리먼트에 고유한 키 값을 넣어줘야 한다. 키값을 넣지 않으면 콘솔창에 경고 메시지가 뜬다. 리스트 내부에 있는 각각의 키값은 "안정적"이고 "고유한" 값이어야 한다. 

 

🗯️ 리스트 항목들에 key를 추가해주지 않으면?

 

만약에 각각의 리스트 항목들에 key를 추가해주지 않으면 리액트는 어떤 항목이 업데이트되었는지 알지 못한다. 그렇기 때문에 모든 항목들을 전부 업데이트시켜서 교체해 버린다. 즉, 모든 항목들 DOM 상에서 업데이트한다. 이렇게 되면 굉장히 비효율적으로 동작하게 된다.

 

key를 추가해주면 추가한 항목 이외에는 DOM 상에서 업데이트되지 않는다. 리액트가 각 항목에 key를 갖고 있기 때문에 어떤 항목이 변경되었고, 어떤 항목이 변경되지 않았는지 알 수 있다. 이전에는 key 값이 없어서 어떤 항목이 변경되었는지 되지 않았는지 몰라서 모든 항목을 업데이트한 것이다. 

 

 

key를 추가하지 않은 리액트 코드

 

import { useState } from 'react';

function App() {
    const [inputValue, setInputValue] = useState('');
    // state 초기값으로 항목이 있는 배열을 넣어줌
    const [list, setList] = useState(['밥먹기', '코딩하기']);

    const addToList = () => {
        setList((prevList) => {
            return [inputValue, ...prevList];
        });
        // input 안에 든 값도 빈 문자열로 초기화
        setInputValue('');
    }

    return (
        <>
            <input
                // inputValue라는 state를 받는다.
                value={inputValue}
                // onChange 이벤트가 발생할 때 setInputValue 함수가 불려서 inputValue에 저장  
                onChange={(e) => setInputValue(e.target.value)}
            >
                <button onClick={addToList}>추가</button>
                <ul>
                    {/* map 함수를 사용하여 항목들을 돌면서 <li> 태그를 사용하여 화면에 출력 */}
                    {list.map((item) => {
                        return <li>{item}</li>
                    })}
                </ul>
            </>
            );
}

export default App;

 

• 리스트에 key 값 설정

{list.map((item) => {
                        return <li key={item}>{item}</li>
                    })}

 

 

안정적이지 않은 key로 인한 문제 
: 동적인 리스트에 key 값으로 index 사용하면 안 된다.

 

.map 함수는 두 번째 인자로 index를 가진다. 그래서 많은 개발자들이 편하게 index를 넣어준다. 하지만 이건 좋지 못한 방법이다. 리액트 공식 문서에서도 index 값을 key로 넣는 것을 최대한 지양하라고 한다. index는 안정적이지 않은 key이기 때문에 새로운 항목이 추가 될 때마다 DOM 요소의 모든 항목을 교체한다. 

 

💡만약에 화면에 출력되는 리스트가 변경되지 않는 정적인 리스트라면 인덱스 값을 key로 사용하는 것은 문제되지 않는다.

 

 

고유하지 않은 중복된 key로 인한 문제

 

중복된 key를 가진 경우 자식이 복제될 수도 있고 이상하게 업데이트 될 수도 있다.

 

• state를 문자 형태가 아닌 객체 형태로 넣어준다. 

const [list, setList] = useState([
	{
    	id: '1',
        value: '밥먹기',
    },
    {
    	id: '2',
        value: '코딩하기',
    },
]);

 

• key랑 value 값

{list.map((item) => {
                        return <li key={item.id}>{item.value}</li>
                    })}

 

• addToList 코드도 변경

const addToList = () => {
        setList((prevList) => {
            return [
            	{
                	// 뒤에 빈 문자열 더해서 id 값 문자열로 만들어 준다.
                	id: list.length + 1 + '',
                    value: inputValue,
            	},
            	...prevList];
        });
        // input 안에 든 값도 빈 문자열로 초기화
        setInputValue('');
    }

 

 

 

 

📕 참고: 유튜브 별코딩 List와 Key의 중요성. 디버깅의 악몽을 피하자!

리스트 형태로 만든 엘리먼트들은 꼭 안정적이고 고유한 Key값을 가져야 합니다. 지금껏 Index값을 키로 사용하셨다면, 악몽 같은 디버깅 시간을 보내실지도 몰라요! 모르면 왕 손해, List와 Key의 중요성.

https://ko.legacy.reactjs.org/docs/lists-and-keys.html

리스트와 Key – React

 

* key는 왜 필요한가?

https://ko.legacy.reactjs.org/docs/reconciliation.html#recursing-on-children

재조정 (Reconciliation) – React