[Front-end] React 리스트와 키

리스트와 키란 무엇인가?

리스트는 컴퓨터 프로그래밍에서 같은 아이템을 순서대로 모아놓은 것입니다. 리스트를 위해 사용하는 자료구조가 바로 배열입니다. 배열은 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것입니다.

const numbers = [1, 2, 3, 4, 5];

 

키는 컴퓨터 프로그래밍에서 각 객체나 아이템을 구분할 수 있는 고유한 값을 의미합니다. 리액트에서는 배열과 키를 사용하여 반복되는 다수의 엘리먼트를 쉽게 렌더링할 수 있습니다.

여러 개의 컴포넌트 렌더링하기

리액트에서 여러 개의 컴포넌트를 렌더링하기 위해 map() 함수를 사용합니다. map() 함수는 배열에 들어있는 각 요소에 어떤 처리를 한 뒤 리턴하는 것으로 이해하면 됩니다. 

// doubled = [2, 4, 6, 8, 10];
const doubled = numbers.map((number) => number * 2);

위 코드는 map() 함수를 사용하여 numbers 배열에 들어있는 각 숫자에 2를 곱한 값이 들어간 doubled라는 배열을 생성하는 코드입니다. 다음 코드는 실제 리액트에서 컴포넌트를 렌더링할 때 map() 함수를 사용하는 예제이다.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => 
	<li>{number}</li>
);

ReactDOM.render(
	<ul>{listItems}</ul>,
    document.getElementById('root')
);

/* 렌더링 결과
<ul>
	<li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
*/

기본적인 리스트 컴포넌트

이제 위에서 작성한 코드를 별도의 컴포넌트로 분리해보도록 하겠습니다.

function NumberList(props) {
	const { numbers } = props;
    
    const listItems = numbers.map((number) => 
    	<li>{number}</li>
    );
    
    return (
    	<ul>{litsItems}</ul>
    );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
	<NumberList numbers={numbers} />,
    document.getElementById('root')
);

NumberList 컴포넌트는 props로 숫자가 들어있는 배열인 numbers를 받아서 이를 목록으로 출력합니다. NumberList 컴포넌트를 사용하면 numbers 배열에 숫자가 수십 개 또는 수백 개가 되어도 별도의 코드를 작성할 필요 없이 화면에 렌더링할 수가 있습니다. 그런데 이 코드를 실행해 보면 개발자 도구의 콘솔 탭에 리스트 아이템에는 무조건 키가 있어야 한다는 내용의 경고 문구가 나옵니다.

리스트의 키에 대해 알아보기

리액트에서의 키는 리스트에서 아이템을 구분하기 위한 고유한 문자열이라고 이해하면 됩니다. 키는 어떤 아이템이 변경, 추가 또는 제거되었는지 구분하기 위해 사용합니다. 리액트에서 키의 값은 리스트에 있는 엘리먼트 사이에서만 고유한 값이면 됩니다. 쉽게 말해서 키는 각 리스트에서 아이템을 구분하기 위한 용도이기 때문에 속한 리스트 내에서만 고유한 값이면 됩니다. 

 

키 값으로는 숫자, id, 인덱스 등을 사용할 수 있는데 숫자나 인덱스를 사용하면 값이 바뀌어서 중복되거나 순서가 바뀔 경우에 키 값의 조건이 충족되지 않을 수 있습니다. 그렇기 때문에 숫자를 사용하는 방법은 지양하고, 인덱스를 사용하는 방법은 배열이 수정되지 않을 경우에 한해서만 사용해야 합니다. 되도록이면 id와 같이 고유한 값을 키로 사용하는 것이 좋습니다.