About

context api를 사용해서 U와 로직을 분리하기

Description

• [x] 컴포넌트간 넘겨받는 props를 줄이기
• [x] context API + 상태관리 hooks 를 활용한 컴포넌트 상태관리
• [x] response데이터 타입 proptypes 분리

설계

• 컴포넌트 시각화
• useState vs useReducer

고민

1. useAxios 업데이트

현재 get요청만 되게 되어있다. axiosInstance를 받아서 사용하지만 hooks의 특성상 callback함수안에서 선언할 수 없고 함수형 컴포넌트 body에 선언해야한다. 그러다보니 기존 코드로 사용자 액션에 의해 발생하는 fetch요청을 수행하기 어려웠다.

우선 댓글 컴포넌트를 위한 useAxios를 만들어봤다. ⇒ useCommentsApi.js

여러 useAxios를 선언하지 않고 하나의 useAxios를 사용하도록 수정했다. 최초 get요청은 하고 이후 수정/삭제/추가 로직이 있을 때마다 자동으로 get요청이 요청되도록 수정했다.

2. 비슷한 구조의 반복되는 컴포넌트를 어떻게 관리할까?

이전

비슷한 구조(형태)가 반복되면 컴포넌트 내부에서 분기처리했다. 아래 구조에서 예를 들면, 대댓글 목록을 위해 CommentList를 반복해서 사용했다.

댓글 수정,추가를 위한 Form은 하나의 Form에서 parentId, isCreate과 같은 변수를 넘겨받아서 구분했다.

.
├── Comment.jsx # 댓글, 대댓글, 
├── CommentList.jsx # 댓글목록, 대댓글목록, 대댓글 표시 상태
├── CommentForm.jsx # 댓글 생성, 댓글 수정, 대댓글 생성, 대댓글 수정
├── index.jsx
└── style.js