Wecode 23일차

08:00~09:20 헬스장
10:00 위코드 도착

오늘은 어제 댓글 달기 과제를 완료하고 컴퍼넌트를 분리했다.

오후에는 팀원들과 모여서 서로의 코드 리뷰를 해주고 깃허브에 PR한 코드에 commit도 달아주느라 시간을 보냈다.

서로 리뷰를 진행한 사항은 다시 수정하여 PR하기로 하였다.

위 사진과 같이 메인페이지 하나만 해도 세 개의 컴포넌트로 분리했는데 원래 컴포넌트는 한 가지 기능만을 갖고 있게 하는 것이 이상적이므로 좀 더 잘게 쪼갤 예정이다.

map 함수를 쓸 때 key값을 넣어주는 이유

https://ko.reactjs.org/docs/lists-and-keys.html

자세한 설명은 위의 react 공식 문서에 나와있지만 내가 느낀대로 써보겠다.

Key란 React가 어떤 항목을 변경, 추가 삭제할지 식별하는 것을 돕는다. 안정적으로 쓰기 위해서 배열 내부의 엘리먼트에 지정.

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

Key를 선택하는 가장 좋은 방법은 대부분의 경우 데이터의 ID를 Key로 사용.

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

그러나 렌더링한 항목에 안정적인 ID가 없으면 항목의 인덱스를 key로 사용할 수 있음.
인덱스를 사용하는 것은 최대한 지양한다.