[리액트] List and Keys

이지민·2025년 5월 30일

공부기록 리액트

리액트

목록 보기

12/15

List (목록)

같은 종류의 아이템을 순서대로 모아놓은 형태
List를 위해 사용하는 자료구조는 Array (배열)
- Array : Javascript의 변수나 객체들을 하나의 변수로 묶어둔 것
```
const numbers = [1, 2, 3, 4, 5];
```
React에서는 배열을 사용해서 리스트 형태로 element들을 렌더링 할 수 있음.

Keys (열쇠)

각각의 객체나 아이템을 구분할 수 있는 고유한 값
React에서 key는 리스트에 존재하는 아이템들을 구분하기 위한 고유한 문자열

여러 개의 Component 렌더링 하기

위의 그림을 보면 컴포넌트 A, B가 반복적으로 사용됨.
→ 컴포넌트를 일일히 다 만드는 것은 비효율적 + 동적으로 화면이 변경되는 경우 구현이 어려움

map()

배열의 모든 변수들에 특정 로직을 적용한 뒤 새로운 배열로 return 하는 함수

map() 사용 예제

const numbers = [10, 20, 30];

const doubled = numbers.map((number) => {
  return number * 2
});

// or
const doubled = numbers.map((number) => number * 2);

map() 을 이용한 React element 렌더링

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

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

기본적인 List Component 렌더링 예시

function NumberList(props){
	const {numbers} = props;
	
	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')
);

// npm run dev로 실행해보면 warning이 뜨는데
// 그 이유는 현재 각 아이템에 고유한 key가 없기 때문임.

List의 Key

리스트에 존재하는 아이템들을 구분하기 위한 고유한 문자열
key는 리스트에서 어떤 아이템이 변경, 추가, 제거되었는지 구분하기 위해 사용

Key의 값은 같은 List에 있는 Element 사이에서만 고유한 값이면 된다.

key로 값을 사용하는 경우

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
	<li key = {number.toString()}>
	// numbers의 값이 중복되지 않으면 정상적으로 동작하지만
	// 중복되는 값이 있다면 "고유성"이라는 key의 규칙에 위배됨
		{number}
	</li>
);

key로 id를 사용하는 경우

const todoItems = numbers.map((todo) =>
	<li key = {todo.id}>
	// id값은 고유한 값이므로 key로 사용하기 적합함.
		{todo.text}
	</li>
);

key로 index를 사용하는 경우

const todoItems = numbers.map((todo, index) =>
	// 아이템들의 고유한 id가 없을 경우에만 사용해야 함.
	// 배열에서 아이템의 순서가 바뀔 수 있는 경우에는 key값으로 index를 사용하는 것은 권장하지 않음.
	<li key = {index}>
		{todo.text}
	</li>
);