React 리스트와 Key

React 리스트 가이드

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

기존의 JavaScript에서는 다음 코드와 같이 map() 함수를 이용하여 numbers 배열의 값을 두배로 만든 후 map()에서 반환하는 새 배열을 doubled 변수에 할당하고 로그를 확인하는 방식으로 리스트를 변환합니다.

기존 Javascript 방식의 리스트 변환
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

React에서 배열을 엘리먼트 리스트로 만드는 방식도 map() 함수를 이용하는데, 위 코드의 Javascript 방식과 거의 동일합니다.

React는 엘리먼트 모음을 만들고 중괄호{}를 이용하여 JSX에 포함시킬 수 있는데, 다음 코드와 같이 JavaScript의 map() 함수를 사용하여 numbers 배열을 반복 실행하면 각 항목에 대해 <li> 엘리먼트를 반환하고 엘리먼트 배열의 결과를 listItems에 저장할 수 있습니다.

엘리먼트 배열의 결과 반환 후 저장하기
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

그 다음 listItems 배열을 <ul>엘리먼트 안에 포함하고 DOM에 렌더링하면, 1부터 5까지의 숫자로 이루어진 리스트가 출력되는 것을 확인할 수 있습니다.

저장된 엘리먼트 출력 후 렌더링하기
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

기본 리스트 컴포넌트

일반적으로는 컴포넌트 안에서 리스트를 렌더링하는데, 앞의 예제를 다음과 같이 numbers 배열을 받아 순서 없는 엘리먼트 리스트를 출력하는 컴포넌트로 리팩토링할 수 있습니다.

배열을 받아 순서없는 엘리먼트 리스트 출력하기
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

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

위 코드를 실행하면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다. key는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트라고 할 수 있는데, 다음과 같이 numbers.map() 안에 있는 리스트의 각 항목에 key를 할당하면 key 누락 문제를 해결할 수 있습니다.

key를 추가한 배열 엘리먼트 리스트 예제

답글 남기기