[리액트] 리스트와 키

리액트에서 데이터의 배열을 컴포넌트 리스트로 변환하는 작업은 매우 일반적이다. 이 과정에서 "key"는 중요한 역할을 한다.

컴포넌트 반복하기

리액트에서 배열의 데이터를 컴포넌트로 변환하는 작업은 자주 발생하는 일이다. 이렇게 여러 개의 컴포넌트를 반복적으로 렌더링하려면 배열의 map 메서드를 활용할 수 있다.

map 메서드 사용하기

자바스크립트의 배열 메서드인 map은 배열의 각 요소에 대해 함수를 실행하고, 그 결과로 새로운 배열을 생성한다. 리액트에서는 이를 활용해 배열 데이터를 컴포넌트로 변환할 수 있다.

예시:

const fruits = ['Apple', 'Banana', 'Cherry'];
const fruitItems = fruits.map((fruit) => <li>{fruit}</li>);

return (
  <ul>{fruitItems}</ul>
);

filter 메서드 사용하기

리액트에서 리스트를 다룰 때, map사용하는 것이 일반적이지만, 조건에 따라 특정 컴포넌트만 렌더링하고 싶다면 filter 메서드도 함께 사용할 수 있다.

1. 렌더링할 리스트 데이터

const users = [
  { id: 1, name: 'Alice', isActive: true },
  { id: 2, name: 'Bob', isActive: false },
  { id: 3, name: 'Charlie', isActive: true },
];

1. Filter 메서드로 조건에 맞는 데이터 선택

isActive 값이 true인 사용자만을 렌더링하고 싶다면, filter 메서드로 해당 조건의 데이터만 선택할 수 있다.

const activeUsers = users.filter(user => user.isActive);

1. Map 메서드로 컴포넌트 생성하기

map 메서드를 사용해 선택된 데이터로 컴포넌트를 생성한다.

const userList = activeUsers.map(user => <User key={user.id} user={user} />);

4. 렌더링

마지막으로 생성된 컴포넌트 리스트를 렌더링하면 된다.

return (
  <div>{userList}</div>
);

컴포넌트로 분리하기

코드의 재사용과 관리를 더 쉽게 하기 위해, 리스트 아이템을 별도의 컴포넌트로 분리할 수 있다.

예시:

function FruitItem({ fruit }) {
  return <li>{fruit}</li>;
}

const fruits = ['Apple', 'Banana', 'Cherry'];
const fruitItems = fruits.map((fruit) => <FruitItem fruit={fruit} />);

return (
  <ul>{fruitItems}</ul>
);

Key

리액트에서 리스트를 렌더링할 때 key는 매우 중요한 역할을 한다. key는 리액트가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 데 도움을 준다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

key의 필요성

리액트는 렌더링 성능을 최적화하기 위해 가상 DOM을 사용한다. 배열을 렌더링할 때 각 요소에 고유한 key를 할당하면 리액트는 변화가 있는 요소만 효과적으로 식별하고 업데이트할 수 있다.

key가 없다면 배열의 모든 요소를 다시 렌더링해야 하므로 성능이 저하될 수 있다.

key 사용하기

key는 각 리스트 항목의 고유한 문자열로 할당되어야 한다. 가능한 한 항목의 고유한 값을 사용하는 것이 좋다.

예시:

const fruits = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
];

const fruitItems = fruits.map((fruit) => <li key={fruit.id}>{fruit.name}</li>);

인덱스를 key로 사용하는 문제점

배열의 인덱스를 key로 사용하는 것은 쉽고 간편할 수 있지만, 배열의 순서가 변경될 가능성이 있다면 문제가 발생할 수 있다. 이는 리액트의 성능 최적화에 방해가 될 수 있으므로, 가능한 한 고유한 값을 사용해야 한다.

고유한 값을 사용하는 방법

1. 데이터의 고유한 값을 사용하기

가장 간단하고 안전한 방법은 이미 고유한 값을 갖고 있는 데이터의 특정 필드를 키로 사용하는 것이다. 예를 들어, 데이터베이스에서 가져온 객체가 id 필드를 갖고 있다면 이를 키로 사용할 수 있다.

const listItems = items.map(item => <li key={item.id}>{item.name}</li>);

1. 라이브러리 사용하기

JavaScript에는 고유한 키를 생성할 수 있는 라이브러리들이 있다. 예를 들어, uuid 라이브러리를 사용하면 매우 고유한 문자열을 생성할 수 있다.

import { v4 as uuidv4 } from 'uuid';

const myKey = uuidv4(); // '6c84fb90-12c4-11e1-840d-7b25c5ee775a'

1. 키 생성 함수 만들기

필요에 따라 고유한 키를 생성하는 함수를 직접 만들 수도 있다. 예를 들어, 타임스탬프와 랜덤 값을 조합하는 방법이 있다.

function createUniqueKey() {
  return `${new Date().getTime()}-${Math.random()}`;
}

key와 컴포넌트

리스트를 렌더링하는 컴포넌트 안에서 key를 정의해야 한다. key는 특별한 속성으로, 컴포넌트 내부에서 props.key로 접근할 수 없다.

리액트에서 key는 컴포넌트의 배열 렌더링을 최적화하는 데 중요하다. 고유한 값을 사용하고, 적절한 위치에서 정의함으로써 리액트의 렌더링 성능을 향상시킬 수 있다.