리스트(List)란?
- 리액트에서 여러 데이터를 화면에 렌더링하기 위해 사용하는 배열을 의미
- Array.map() 메서드를 활용해 데이터를 컴포넌트로 변환하여 렌더링하는 것이 일반적
리스트(List)를 사용하는 목적
반복적인 데이터를 화면에 표시
- 리액트에서 배열 데이터를 화면에 렌더링할 때 map 메서드와 리스트 구조를 활용
- 리스트는 주로 동일한 구조를 가지는 항목을 반복적으로 렌더링할 때 사용
- 1, 2, 3, 4, 5라는 값을 ul안의 li에 표현을 하기 위해서는 다음과 같이 작성
import React from 'react';
function App() {
return (
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
);
}
export default App;
- 리스트 사용
- 반복적인 데이터를 배열로 관리해 코드가 간결
- 숫자가 추가될 경우 배열만 수정하면 되기 때문에 유지보수가 용이
import React from 'react';
function App() {
const repeatNumber = [1, 2, 3, 4, 5];
return (
<div>
<ul>
{repeatNumber.map(number=>(
<li>{number}</li>
))}
</ul>
</div>
);
}
export default App;
배열의 값을 효율적으로 화면에 표시하는 것
- 배열 데이터를 렌더링하는 데 있어서 반복문처럼 동작하지만 리액트 컴포넌트의 상태 변화와 결합될 때 큰 장점을 발휘
- 리액트의 상태(useState)와 배열(map)을 활용하면 동적으로 데이터를 추가하거나 제거하는 인터랙티브한 UI를 구현 가능
- 배열 데이터를 렌더링하고 추가 기능 구현
import React, {useState} from 'react';
function App() {
const [tasks, setTasks] = useState(['Learn React', 'Build a project']);
const addTask = () => {
setTasks([...tasks, 'New Task']);
};
return (
<div>
<button onClick={addTask}>Add Task</button>
<ul>
{tasks.map(task => (
<li>{task}</li>
))}
</ul>
</div>
);
}
export default App;
리스트에서 Key를 부여하지 않았을 경우
- 아래의 코드에서 1, 2, 3, 4, 5의 li 컴포넌트가 화면에 정상적으로 보이는 듯 하지만 개발자 도구(F12)의 콘솔에는 에러가 발생
- 이는 각 컴포넌트가 고유한 Key 값을 가지지 않기 때문에 발생한 에러
import React from 'react';
function App() {
const repeatNumber = [1, 2, 3, 4, 5];
return (
<div>
<ul>
{repeatNumber.map(number=>(
<li>{number}</li>
))}
</ul>
</div>
);
}
export default App;
키(Key)란?
- 각 리스트 항목을 고유하게 식별할 수 있도록 도와주는 속성
- 리액트는 Key를 사용해 다음과 같은 작업을 최적화
- 리스트의 추가 또는 제거 시 최소한의 DOM 변경만 수행
- 순서를 변경할 때 기존 요소를 재활용
키(Key)의 역할과 필요성
Key가 없는 경우
- 어떤 요소가 추가, 삭제, 수정되었는지 식별이 불가하여 리스트 전체를 다시 렌더링
- 이는 불필요한 렌더링으로 이어져 성능 저하를 유발
- 특히, 요소의 개수가 많거나 리스트가 자주 업데이트되는 경우 문제가 더욱 심각해질 수 있음
Key가 있는 경우
- Key는 리스트의 각 요소를 고유하게 식별할 수 있는 값
- 리액트는 Key를 기준으로 변경 사항을 감지하여 변경된 부분만 업데이트
- 덕분에 불필요한 DOM 조작을 줄이고 렌더링 성능이 크게 향상
Key에 대한 결론
- 엄청나게 큰 리스트에 Key가 없는 경우 컴포넌트 전체를 업데이트 하기 때문에 렌더링을 하는 시간이 크게 소요
- 따라서, Key를 사용하면 불필요한 DOM 업데이트를 방지하고 특히 대규모 리스트에서 성능 최적화를 극대화
키(Key) 사용 시 주의사항
- Key는 고유해야 함
- 배열의 각 항목에 대해 고유한 값을 제공해야 함
- 보통 데이터의 ID를 사용
- 단, 한 배열 안에서의 Key가 고유하기만 하면 되고 서로 다른 배열의 Key 값이 동일한 것은 문제 되지 않음
const FruitList1 = [
{id : 1, name : Apple},
{id : 2, name : Banana},
{id : 3, name : Cherry}
]
const FruitList2 = [
{id : 1, name : Apple},
{id : 2, name : Banana},
{id : 3, name : Cherry}
]
// FruitList1과 FruitList2의 id 값이 동일하지만 문제 없음
- 인덱스를 Key로 사용하는 것은 지양
- 요소의 순서가 변경되거나 리스트가 재정렬될 때 의도치 않은 결과가 발생 가능
키(Key) 사용 방법
데이터의 ID 사용
- 리액트가 각 항목을 고유하게 식별
- 변경된 항목만 업데이트하므로 성능이 개선
import React from 'react';
function App() {
const items = [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' },
];
return (
<ul>
{items.map((item) => (
<li key={item.id}>{item.name}</li> // Key 추가
))}
</ul>
);
}
export default App;
인덱스를 Key로 사용
- 리스트가 재정렬되거나 항목이 추가/제거되면 잘못된 요소가 업데이트될 가능성이 있음
- map의 index를 사용은 지양
import React from 'react';
function App() {
const repeatNumber = [1, 2, 3, 4, 5];
return (
<div>
<ul>
{repeatNumber.map((number, index)=>(
<li key={index}>{number}</li>
))}
</ul>
</div>
);
}
export default App;
