List
React의 반복문은JavaScript의 배열 고차 함수Map을 사용하여 구현
React에서 반복되는 컴포넌트를 랜더링할 때 JavaScript의 배열 고차 함수인 Map을 사용한다.
이전 포스팅에서 소개했던 Map을 React에서 사용하는 방법은 다음과 같다.
const fruits = ['apple', 'banana', 'melon', 'peach', 'grape'];
const fruitList = fruits.map((fruit) =>
<li>{fruit}</li>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ul>{fruitList}</ul>);
Key
React는Key를 통해 특정 항목의 변경사항을 탐지
위 예제를 실행하면 정상적으로 화면에 결과가 출력되지만 콘솔에는 아래와 같은 에러가 발생한다.
에러를 해석해보면 다음과 같다.
List의 각각의 자식에는 고유한Key가 존재해야 한다
Key는 엘리먼트 리스트를 만들 때 반드시 포함해야 하는 특수한 문자열 어트리뷰트이다.
React에서는 Key를 통해 렌더링 과정에서 발생하는 변경, 추가, 삭제..등의 각 아이템의 변경사항을 탐지한다.
만약 Key를 지정하지 않는다면 가상 DOM을 순차적으로 비교하여 변경사항을 탐지하기 때문에 속도가 느려진다.
Key를 선택하는 대표적인 방법은 다음과 같다.
-
각각의 아이템을 고유하게 식별할 수 있는 문자열, 즉
ID값을 부여한 뒤 사용 -
배열의
Index를 사용
가장 좋은 방법은 ID를 사용하는 것이지만 렌더링 항목에 대해 안정적인 ID값이 존재하지 않는다면 Map의 매개변수 Index를 key로 사용할 수 있다.
하지만 Index를 사용할 경우에 배열의 순서가 변경되면 Index 또한 변경되기 때문에 권장하지 않는다.
아래 코드는 Key를 사용한 예제이다.
// id 사용
const fruits = [
{id: 'fk1dsa', fruit: 'apple'},
{id: 'jtyf3', fruit: 'banana'},
{id: 'nvbhcfg', fruit: 'melon'},
{id: 'ertdxy7', fruit: 'peach'},
{id: 'qweq2', fruit: 'grape'},
];
const fruitList = fruits.map((item) =>
<li key={item.id}>{item.fruit}</li>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ul>{fruitList}</ul>);// index 사용
const fruits = ['apple', 'banana', 'melon', 'peach', 'grape'];
const fruitList = fruits.map((item, index) =>
<li key={index}>{item}</li>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ul>{fruitList}</ul>);JSX에서의 Map
Map을 JSX에 포함하는 방법은 이전 Conditional Rendering과 동일하다.
JSX에서는 중괄호 안에 모든 표현식을 포함 시킬 수 있으므로 아래와 같이 인라인으로 처리하면 가독성을 높일 수 있다.
function FruitList(props) {
const fruits = props.fruit;
return (
<ul>
{fruits.map((fruit) =>
<ListItem key={fruit.toString()}
value={fruit} />
)}
</ul>
);
}참고 자료
