6. 컴포넌트 반복

컴포넌트

컨테이너 컴포넌트 : 데이터 처리, 이벤트 처리, 여러 프리젠테이셔널 컴포넌트를 포함

프레젠테이셔널 컴포넌트 : 보이는 화면 구성

모델

• 데이터 관련 로직

exam03 폴더 만들기

yarn create react-app exam03

npm init react-app exam03

react-icons 다운 받기

yarn add react-icons

npm i react-icons

컴포넌트 반복

1. 자바스크립트 배열의 map() 함수
2. 데이터 → JSX 형태로 변환
3. 데이터 배열을 컴포넌트 배열로 변환하기
4. key
   1. key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용
   2. 유동적인 데이터를 다룰 때는 원소를 새로 생성할 수도, 제거할 수도, 수정할 수도 있습니다.
   3. key가 없을 때는 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지합니다.
   4. 하지만 key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있습니다.
5. key 설정
   1. key 값은 언제나 유일해야 합니다.
   2. 데이터가 가진 고유값을 key 값으로 설정해야 합니다.
6. 응용
   1. 초기 상태 설정하기
   2. 데이터 추가 기능 구현하기
   3. 데이터 제거 기능 구현하기

react-icons 라이브러리 → svg 이미지

yarn add react -icions

npm i react-icons

map → 변환 → 새로운 배열 객체