- map 함수를 사용해서 리스트를 렌더링 했는데 각 엘리먼트에 키가 빠져 오류가 나는 상황
- 화면에 각 학생 객체의 고유한 값을 가진 아이디를 추가
- map 함수의 엘리먼트에 아이디를 값으로 해서 키를 넣어줌
- key를 포맷팅 된 문자열을 key로 사용할 수도 있고 인덱스를 키로 사용할 수도 있음
- AttendanceBook 컴포넌트는 student라는 배열로부터 학생 정보가 담긴 객체를 받아 학생들의 이름을 목록 형태로 출력하는 컴포넌트
- 배열을 렌더링 하기 위해 map() 함수 사용
🎖️ List
- 같은 아이템을 순서대로 모아놓은 것이 리스트에 해당
- 리스트를 위해 사용하는 자료구조는 배열 (Array)
- 배열은 JavaScript의 변수나 객체를 하나의 변수로 묶어 놓은 것을 의미
const numbers = [1, 2, 3, 4, 5];
- React에서는 배열을 사용하여 리스트 형태로 엘리먼트들을 렌더링 할 수 있음
🎖️ Key
- 각 객체나 아이템을 구분할 수 있는 고유한 값
- React에서의 key는 리스트에 존재하는 아이템들을 구분하기 위한 고유한 문자열
- 리스트에서 어던 아이템이 변경, 추가 또는 제거되었는지 구분하기 위해 사용
- 범위가 한정되어 있음
- 리액트에서의 key 값은 같은 List에 있는 Elements 사이에서만 고유한 값이면 됨
const numbers = [1,2,3,4,5];
const listItem = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
- numbers 배열의 숫자들이 중복하지 않는 경우에는 정상적으로 작동하지만 중복된 숫자가 들어온다면 key값도 중복되기 때문에 고유해야 한다는 key값의 조건이 충족되지 않음
const todoItem = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
- 아이디의 의미 자체가 고유한 값이기 때문에 key값으로 사용하기 적합
const todoItem = todos.map((todo,index) =>
// 아이템들의 고유한 ID가 없을 경우에만 사용해야 함
<li key={index}>
{todo.text}
</li>
);
- 인덱스 값도 고유한 값이기 때문에 key값으로 사용해도 됨
- 배열애서 아이탬의 순서가 바뀔 수 있는 경우에는 key값으로 인덱스를 사용하는 것을 권장하지 않음
- 성능에 부정적인 영향을 줄 수 있고 컴포넌트의 스테이트와 관련해서 문제를 발생시킬 수 있음
- 인덱스를 key값으로 사용하는 것은 아이템들의 고유한 아이디가 없을 경우에만 사용하는 것이 좋음
🎖️ 여러 개의 Component 렌더링
- React에서는 배열과 키를 사용하여 반복되는 여러 개의 컴포넌트를 쉽게 렌더링할 수 있음
- 같은 컴포넌트를 화면에 반복적으로 나타내야 할 경우에 코드 상에 하나씩 직접 넣는 것은 비효율적 => 같은 코드가 계속해서 반복
- 동적으로 화면의 내용이 바뀌는 경우에는 코드를 직접 하니씩 넣는 방식으로 구현하기가 까다로움
🎖️ map()
- 한 쪽의 아이템과 다른 한쪽에 있는 아이템을 짝지어 준다는 의미를 가지고 있음
- 배열에 들어가있는 각 변수에 어떤 처리를 한 뒤 리턴하는 것
const doubled = number.map((number) => number * 2);
- map() 함수는 배열의 첫 번째 아이템부터 순서대로 각 아이템의 어떠한 연산을 수행한 뒤에 최종 결과를 배열로 만들어 리턴
- map() 함수 안에 있는 Element는 꼭 key가 필요함
