프론트엔드 디렉토리 구조

1. 프론트엔드 폴더 구조를 변경하였습니다.

   • 폴더 구조

   /Hooks    ...... custom hook 파일을 넣는 폴더이다.
   /Models   ...... flux 구조를 따라 모델에서 컴포넌트들에 데이터를 전달한다.
   /Routes   ...... 라우팅만 담당한다.
   /Components ...... view component
   	.../commons ...... 공통적으로 사용되는 component

   • Flux 구조 참고

   Flux 구조를 따라 model에서 상태를 관리하고, model에서 view로 데이터(상태)를 보내주도록 하였습니다.

2. custom hook 추가 : useAsync

   • 서버로부터 데이터를 가져와서 reducer에 값을 넣는 useAsync 훅을 추가하였습니다.
   • api, reducer, deps, initialState 를 인자로 전달합니다.

   const { state, fetchStatus, dispatch } = useAsync({
       api: getIssuesApi,
       reducer,
       deps: [location.search],
       initialState,
     });

   • 반환값 : {state, fetchStatus, dispatch}

   fetch하는 과정에서 error가 발생하면 error에 값이 들어옵니다.

   loading중인지 아닌지는 boolean값으로 확인합니다. loading중인 경우에는 return null;을 해줘야 합니다.

   const { page, lastPage, issues, checkAllIssue } = state;
   const { error, loading } = fetchStatus;
   
   if (error) {
     return <div>{error}</div>;
   }
   if (loading) {
     return null;
   }

3. useAsync 사용시 주의사항

   1. action-type에서 hooks/useAsync에 있는 'FETCH_SUCCESS'를 import합니다.

   import { FETCH_SUCCESS } from '../../../hooks/useAsync';
   
   export default {
     FETCH_SUCCESS,
   };

   2. actions를 정의할 때 반드시 'FETCH_SUCCESS'에 대한 함수를 정의해야 합니다.

   import actionType from './action-type';
   
   export default {
     fetchSuccess(data) {
       return {
         type: actionType.FETCH_SUCCESS,
         data,
       };
     },
   };

   3. reducer에서도 반드시 'FETCH_SUCCESS'를 정의해야 합니다.

   import actionType from './action-type';
   
   const { FETCH_SUCCESS } = actionType;
   
   export default function reducer(state, action) {
     const { type, data } = action;
     switch (type) {
       case FETCH_SUCCESS: {
         const issue = data;
         return {
           issue,
           countOfComments: issue.Comments.length,
         };
       }
       default:
         return state;
     }
   }