RT. 8 Map

Intro

Map 함수 관련 내용은 이미 JS를 통해서 설명을 했기에 아래 링크를 통해 자세히 알아보면 될 것이다

url : https://velog.io/@j2an/JS-26.-Map-Filter-Reduce

외부로 설정한 데이터 객체가 있다

이를 바인딩 하기 위해 map 함수를 이용

1. todoData의 각 단일 객체를 data라는 변수로 받기

2. 각 단일 객체를 여러 요소로 구성된 하나의 박스 형태로 출력하기 위해 div로 감싸기

3. div는 key로 해당 객체의 id로 설정

4. 각 요소에 맞게 데이터 속성 이름 넣기

만약 Key 속성 안넣는다면?

바로 에러 발생

JSX Key 속성

리액트에서 요소의 리스트 나열시 Key를 넣어줘야 함

Key는 리액트가 변경, 추가 또는 제거된 항목 식별하는데 도움

요소 내 정적인 ID 부여하려면 배열 내부의 요소에 키 제공

Key -> 변경된 부분 인식

3번을 1,2번 뒤에 추가 시 리액트에서는 3번만 추가하면 된다고 인식

3번을 1,2번 앞에 추가 시 리액트가 모든 요소가 새롭게 된거라 인식

모든 자식 요소를 새롭게 painting

Key 적용하면 3번을 추가 후 1,2번은 자리만 이동하게 조작

Key -> 유니크한 값 넣기 (index는 비추천)

index도 key와 마찬가지로 0부터 시작해 유니크한 값 가지지만

리스트가 추가, 변경되면 해당 리스트들의 key값도 변경

따라서 index가 아닌 별도의 유니크한 값으로 설정