처음 만난 리액트 문서
10.6 마치며
이번 장에서 배운 내용은 아래와 같습니다.
- 리스트
- 같은 아이템을 순서대로 모아놓은 것
- 키
- 각 객체나 아이템을 구분할 수 있는 고유한 값
- 여러 개의 컴포넌트 렌더링
- 자바스크립트 배열의
map()함수를 사용- 배열에 들어있는 각 변수에 어떤 처리를 한 뒤 결과(엘리먼트)를 배열로 만들어서 리턴함
map()함수 안에 있는 엘리먼트는 꼭 키가 필요함
- 자바스크립트 배열의
- 리스트의 키
- 리스트에서 아이템을 구분하기 위한 고유한 문자열
- 리스트에서 어떤 아이템이 변경, 추가, 또는 제거되었는지 구분하기 위해 사용
- 리액트에서는 키의 값은 같은 리스트에 있는 엘리먼트 사이에서만 고유한 값이면 됨
- 다양한 키값의 사용법
- 숫자 값을 사용
- 배열에 중복된 숫자가 들어있다면 키값도 중복되기 때문에 고유해야 한다는 키값의 조건이 충족되지 않음
id를 사용id의 의미 자체가 고유한 값이므로 키값으로 사용하기 적합id가 있는 경우에는 보통id값을 키값으로 사용
- 인덱스를 사용
- 배열에서 아이템의 순서가 바뀔 수 있는 경우에는 키값으로 인덱스를 사용하는 것을 권장하지 않음
- 리액트에서는 키를 명시적으로 넣어주지 않으면 기본적으로 이 인덱스 값을 키값으로 사용
- 숫자 값을 사용
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page