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

수강 인증샷

 

---

패스트캠퍼스 챌린지란?

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

---

16일차

 16일차에는 Part 1. React 기초 Ch 01. React 맛보기 챕터에서 25. Key와 리랜더링 알아보기 1 강의와 26. Key와 리랜더링 알아보기 2 강의 내용에 대해 기록하려 한다.

 Part 1. React 기초 Ch 01. React 맛보기 챕터에서 25. Key와 리랜더링 알아보기 1 강의에서는 먼저, Key가 무엇인지에 대해 공부한다. Key는 Value를 특정하는 이름을 뜻하며 고유해야 한다. JSX에서 JS 문법인 map 함수를 선언할 때, key를 쓰지 않으면 다음과 같은 오류를 볼 수 있다. Each Child in a list should have a unique "key" prop 자식들은 unique한 key prop을 갖고 있어야 한다는 뜻으로 key prop을 주라는 뜻이다.

 Part 1. React 기초 Ch 01. React 맛보기 챕터에서 25. Key와 리랜더링 알아보기 2 강의는 이전 강의에서 좀 더 확장하여 Key가 중요한 이유는 재사용, 리렌더링과 연관이 있기 때문이다. 예를 들어, 어떠한 list를 map을 통해 렌더링을 하는 상황을 가정하였을 때, key 없이 그냥 주었다면 React는 버튼을 다시 그리는 식으로 진행했을 것이다. 하지만 key를 준다면 React는 요소들을 key를 통해 계속해서 재활용하기에 좀 더 유용한 재사용이 될 것이다. 다만, 배열에 존재하는 index값을 key를 주면 index는 그저 배열에 순서를 나타낸 값이기 때문에 우리가 원하는 재사용을 할 수 없다.

 

---

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

 

---

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