[클라우딩 어플리케이션 엔지니어링 TIL] 240215 - React 실전 프로젝트 3

Intro

---

어제에 이어 프로젝트 기초 공사를 마무리하고 홈 화면을 구현하는 실습을 따라해 보았다.

 

 

 

오늘 학습한 내용

: 프로젝트 기초 공사, 프로젝트 홈 화면 구현

---

프로젝트 기초 공사 - 2

1. 상태 관리 세팅하기
2. 프로젝트 State Context 세팅하기
3. 프로젝트 Dispatch Context 세팅하기

상태 관리 세팅하기

" 프로젝트에서 전반적으로 사용될 데이터 State 관리 로직 작성하기 "

 

일기 프로젝트에서, Home은 일기 리스트, New 페이지에선 일기를 생성하는 로직, Edit 페이지에선 일기를 수정하는 로직, Diary 페이지엔 일기 데이터 하나가 필요하다.

➡️ useReducer 사용

const [data, dispatch] = useReducer(reducer, dummyData);

 

프로젝트 State Context 세팅하기

" 데이터 State를 공급할 Context를 생성하고 Provider로 공급하기 "

 

 

프로젝트 Dispatch Context 세팅하기

" 일기 데이터 State의 Dispatch 함수들을 공급할 Context를 생성하고 Provider로 공급하기 "

 

 

 

 

---

페이지 구현 - 홈(/)

• 해당 월의 기간 구하기 ex) 1/1 ~ 1/31

// 해당 월의 첫 날
const firstDay = new Date(curDate.getFullYear(), curDate.getMonth(), 1).getTime();

// 해당 월의 마지막 날
const lastDay = new Date(curDate.getFullYear(), curDate.getMonth() + 1, 0).getTime();

 

• 깊은 복사

const copyList = JSON.parse(JSON.stringify(diaryList))

 

• React에서 클래스명 여러개 사용하는 방법

<div className={['emotion_img_wrapper', `emotion_img_wrapper_${emotion}`].join(' ')}>

: 배열 리스트로 작성하고 문자열로 나타내야하므로 join으로 string으로 변환

 

• 날짜를 yyyy.m.d. 형태로 바꾸는 방법

const strDate = new Date(parseInt(date)).toLocaleDateString();

 

 

 

마무리

---

완성한 홈 화면!!

 

폰트가 약간 내 스타일이 아니라 강의와 다르게 바꿔주었다. 😁

배운 내용들을 실습을 통해 복습하는 느낌이라 크게 어려운 건 없었다.

까먹었던 함수들도 프로젝트 실습을 통해 다시 기억할 수 있어 좋았다.