일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- CI/CD
- 반공변성
- SSR
- useAppDispatch
- webpack
- CORS
- React
- 인터섹션
- tailwind
- Promise
- ESlint
- 결정 알고리즘
- 공변성
- 이분 검색
- Jest
- 리터럴 타입
- 타입 좁히기
- 투포인터
- map
- autosize
- Cypress
- app router
- 무한 스크롤
- dfs
- TS
- 태그된 유니온
- 호이스팅
- RTK Query
- async/await
- recoil
Archives
- Today
- Total
짧은코딩
리스트 렌더링 본문
반응형
-App.js
import "./App.css";
import DiaryEditor from "./DiaryEditor";
import DiaryList from "./DiaryList";
const dummyList = [
{
id: 1,
author: "이정환",
content: "하이 1",
emotion: 5,
created_date: new Date().getTime(),
},
{
id: 2,
author: "홍길동",
content: "하이 1",
emotion: 5,
created_date: new Date().getTime(),
},
{
id: 3,
author: "아무개",
content: "하이 1",
emotion: 5,
created_date: new Date().getTime(),
},
];
const App = () => {
return (
<div className="App">
<DiaryEditor />
<DiaryList diaryList={dummyList} />
</div>
);
};
export default App;
dummyList로 임의의 리스트를 만들고 리스트 렌더링 연습을 한다.
-DiaryList.js
import DiaryItem from "./DiaryItem";
const DiaryList = ({ diaryList }) => {
return (
<div className="DiaryList">
<h2>일기 리스트</h2>
<h4>{diaryList.length}개의 일기가 있습니다.</h4>
<div>
{diaryList.map((it) => (
<DiaryItem key={it.id} {...it} />
))}
</div>
</div>
);
};
DiaryList.defaultProps = {
diaryList: [],
};
export default DiaryList;
diaryList를 받아온다. 그리고 개수가 몇 개 있는지 알려준다.
map 함수를 활용하면 리스트의 객체를 순서대로 가져온다. it을 사용해서 가져오면 된다.
그리고 리스트의 자식 요소들은 반드시 key 값을 받아야 한다. 그래서 it.id를 키 값으로 줬다.
그리고 컴포넌트화 시켜서 DiaryItem을 또 만든다.
만약 저장된 값이 없을 땐 undefined가 들어와서 이것을 방지하기 위해 마지막쯤에 defaultProps를 사용해 기본 값을 지정한다.
-DiaryItem.js
const DiaryItem = ({ author, content, created_date, emotion, id }) => {
return (
<div className="DiaryItem">
<div className="info">
<span>
작성자 : {author} | 감정점수 : {emotion}
</span>
<br />
<span className="date">{new Date(created_date).toLocaleString()}</span>
</div>
<div className="content">{content}</div>
</div>
);
};
export default DiaryItem;
각 값들을 받아와서 사용한다.
그리고 new Date의 toLocalString() 함수는 우리가 아는 00시 00분 00초로 시간을 나타나게 해준다.
반응형
'인프런, 유데미 > 한입 크기로 잘라 먹는 리액트' 카테고리의 다른 글
데이터 삭제하기 (0) | 2022.05.25 |
---|---|
데이터 추가하기 (0) | 2022.05.24 |
간단한 일기장 프로젝트-State로 사용자 입력처리, useRef (2) | 2022.05.23 |
React 기초-State, Props (0) | 2022.05.22 |
React 기초-creat react app, jsx (0) | 2022.05.22 |
Comments