패스트캠퍼스 챌린지 26일차 - 한 번에 끝내는 React의 모든 것 초격차 패키지 Online

수강 인증샷

---

패스트캠퍼스 챌린지란?

 패스트캠퍼스에서 진행하는 '50일 공부 루틴 챌린지' 행사로 50일 동안 매일 수강 인증샷과 함께 학습 기록을 게시글로 남기는 행사다.

---

26일차

 26일차에는 Part 1. React 기초 Ch 02. 공식 문서로 디테일잡기(초급) 챕터에서 09. List 강의 내용에 대해 기록하려 한다.

 Part 1. React 기초 Ch 02. 공식 문서로 디테일잡기(초급) 챕터에서 09. List 강의에서는 JavaScript에서 먼저, 리스트를 어떻게 반환하는지 살펴본다. JavaScript에 내장된 map 함수를 이용하면, map이 배열의 개별 요소들을 하나하나 순회하여 원하는 행동을 실행하고 새로운 배열을 하나 반환해주거나 새 배열을 저장하고 싶으면 변수의 선언과 동시에 담아줄 수 있다. 또한, 이 map을 이용하여 여러 개의 컴포넌트를 렌더링할 수 있다. 예를 들어, 한 배열을 map 함수를 사용하여 반복 실행할 때, 각 항목에 대해 li 엘리먼트를 반환하고 엘리먼트 배열의 결과를 한 변수에 저장한다고 가정했을 때, 그 변수에 저장한 배열을 ul 엘리먼트 안에 포함하고 렌더링을 하게 되면 여러개의 컴포넌트를 렌더링하게 되는 것이다. 하지만, 일반적으로 컴포넌트 안에서 리스트를 렌더링한다.

 React에서 map을 사용할 때, console 창을 보면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시되는데, key는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트다. Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별할 것을 돕는다. 엘리먼트에 안정적인 고유성을 부여하기 위해 Key는 배열 내부 엘리먼트에 지정해야 한다. Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이며 대부분의 경우는 데이터의 ID를 Key로 사용한다. 

---

본 게시글은 이벤트 참여를 위해 작성된 게시글입니다.

 

---

패스트캠퍼스 공식 홈페이지 : https://bit.ly/37BpXiC