[한 입 리액트] React에서 배열 사용하기 1 - 리스트 렌더링(조회)

React에서 리스트 사용하기

 

Array.map((it) => <Component key={it.id} {...it} />

 

 

 

cf. ctrl + s : 프리티어로 예쁘게 정렬됨

 

 

일기 목록을 보여줄 때, map 이용해 객체로 되어 있는 데이터를 props로 활용,

DiaryList 컴포넌트에게 dummyList를 diaryList라는 이름의 prop으로 전달. 

 

 

위와 같이 작성하면,

이런 에러가 뜰 것이다.

리스트의 각각의 자식요소는 고유한 키를 가져야 한다 !

 

이 자식들의 부모 태그에  key prop을 설정해준다. 

(위에서 프롭 중 아이디가 고유하게 있어 활용한 것)

(만약에 아이디와 같은 고유값이 없다면, map의 파라미터로 it 외에 idx를 하나 더 추가하면 된다.

다만, idx로 키를 정하면 데이터를 자리를 바꾸거나 해서 idx가 달라지면서 문제가 될 수 있다는 점은 인지하길)

 

 

 

 

 

 

 

마지막으로 일기 리스트에 CSS 주기