11.04.22{코딩일기}벨로퍼트와 함께하는 모던리액트 4-5 챕터리뷰

[ 새롭게 알게 된 것 ]

---

1. 현재 로그인된 사용자의 정보,설정등의 데이터들은 Hook대신 ContextAPI를 사용하면 좋음

---

기존에 Users의 User 컴포넌트에서 가각 API를 호출해 동일한 데이터를 가져왔음.

1,2개 컴포넌트가 아닌 수십, 수백개의 컴포넌트에서 동일한 데이터를 API로 가져와야할때 유용함.

기존엔 API를 호출할때 동일한 데이터임에도 불구하고 각 컴포넌트마다 커스텀 Hook을 또 만들어 호출해서 불편했음.

이런 불편함을 개선해준게 바로 ContextAPI임. 만약 리액트 버전16이 없었다면 이런 일도 불가능했을 거임.

동일한 Hook을 컴포넌트에 각각 또 생성할 필요없이 ContextAPI를 사용해 데이터를 갖고 오는 좋은 패턴이 바로 ContextAPI임

확실히 ContextAPI를 사용하면 코드양이 줄고 확장성이 높아지는 것을 확인 할 수 있었음.

---

2. API호출코드는 따로 api.js와 asyncActionUtils.js파일을 만들어 리팩토링해주면 깔끔함

---

asyncActionUtils는 이름그대로 api호출 응답 결과 실패 또는 성공에 따른 처리하는 유틸임

이를 사용하면 ContextAPI 코드가 훨씬 깔끔해짐을 확인할 수 있음.

리듀서쪽에 사용자 상태객체가 로딩중,성공,또는 실패 처리함수도 asyncActionUtils.js로 옮겨 리팩토링 할 수 있음

initailAsyncsState라는 객체를 내보내고, CreateAsyncHandler함수 만들어서 내보내면 됨. 자세한건 책 참조.

벨로퍼트님께서 알려주신대로 리팩토링하면 ContextAPI파일에는 아래와 같이 깔끔하게 사용가능해짐

import {
  createAsyncDispatcher,
  createAsyncHandler,
  initialAsyncState
} from './asyncActionUtils';
import * as api from './api'; // api 파일에서 내보낸 모든 함수들을 불러옴

// UsersContext 에서 사용 할 기본 상태
const initialState = {
  users: initialAsyncState,
  user: initialAsyncState
};

const usersHandler = createAsyncHandler('GET_USERS', 'users');
const userHandler = createAsyncHandler('GET_USER', 'user');

---