프로젝트 분석

이유 및 코드

강의를 보며 만들었던 emotion-diary 프로젝트를 큰 흐름을 기준으로 분석해보려고 한다. 아직은 리액트의 로직을 잘 모르는 것 같아서 분석을 하면서 정리하면 도움이 될 것이라고 생각한다.

 

-깃허브

https://github.com/5hyun/emotion-diary

GitHub - 5hyun/emotion-diary

코드는 여기서 보면된다.

---

초기 설정

1. 폰트, 레이아웃, 이미지 등을 세팅

2. 버튼, 헤더 등 여러 페이지에서 공통으로 사용 할 컴포넌트 세팅

---

App.js

1. 복잡한 컴포넌트의 로직 분리를 하기 위해 useReducer 사용, 그리고 reducer 함수를 만들어서 INIT, CREATE, REMOVE, EDIT를 만들고 dispatch도 이용해서 자식 컴포넌트에 전달해준다.

2. Prop Drilling을 해결하기 위해 onCreate, onRemove, onEdit를 Provider를 이용해서 공급한다. 

3. Routes를 이용해서 SPA 방식으로 구축

---

components

-MyHeader.js

1. 왼쪽, 가운데, 오른쪽 버튼을 구성한다.

 

-MyButton.js

1. 버튼의 type에 따라 색이 다르게 보일 수 있도록 구현한다.

2. 만약 에러나 오타가 생겨 클래스네임이 이상하면 자동으로 default 타입을 갖도록 한다.

 

-DiaryItem.js

1. 저장된 일기가 화면에 나오게 해주며 각 클릭시 조회 페이지 혹은 수정 페이지로 이동할 수 있게 해준다.

 

-DiaryList.js

1. ControlMenu 컴포넌트를 하나 더 만들어서 정렬 기능을 구현한다.

2. ControlMenu, Mybutton, DiaryItem 컴포넌트를 이용해서 정렬, 일기 생성버튼을 해준다.

 

-DiaryEditor.js

1. 새로운 일기 작성 + 일기 수정 페이지 둘 다 구현한다.

2. isEdit을 통해 일기 생성인지 수정인지 구분한다.

 

-EmotionItem.js

1. 현재 일기의 데이터를 반환해준다.

 

---

pages

-Home.js

1. useContext을 이용해서 App.js에서 데이터를 받아온다.

2. 상단 헤더 제목과 날짜를 만들어준다.

3. MyHeader, DiaryList 컴포넌트를 이용해서 헤더와 일기 내용을 구현해준다.

 

-Diary.js(상세 페이지)

1. useContext를 이용해서 데이터를 받아온다.

2. 일기가 존재하는지 여부를 확인하고 일기 상세 페이지로 이동한다.

 

-New.js

1. DiaryEditor 컴포넌트를 이용해서 페이지를 구현한다.

 

-Edit.js

1. useContext을 이용해서 어떤 일기를 수정할지 받아온다.

2. isEdit을 True로 만들어 DiaryEditor 컴포넌트에 수정 상태라고 알려준다.