[코드숨] 리액트 13기 -5강/과제1(레스토랑 조회 구현하기) 풀이 참고

App.jsx 에서

0. 지역, 분류 목록을 얻기
1. 지역 선택 -Regions <- API (0번에서 옴)
2. 분류 선택 -Categories <- 한식, 중식, 일식, ... <-API (0번에서 옴)
3. 식당 목록 -Restaurants <- API (with region, category) =>1,2 모두 완료된 경우

 

1. App에 들어갈 컴포넌트 추가 (지역, 분류, 식당)

export default function App() {
  return (
    <div>
      <RegionsContainer />
      <CategoriesContainer />
      <RestaurantsContainer />
    </div>
  );
}

 

2. 그 위에는 해당함수가 있을 것

  function RegionsContainer() {
    return null;
  }

  function CategoriesContainer() {
    return null;
  }

  function RestaurantsContainer() {
    return null;
  }

 

3. useEffect  dispatch 추가 (reducer-데이터 수정방법을 정의해놓음 / dispatch로 수정방법실행할것임 )

 

4. loadInitialData 함수 작성

 

5. loadInitialData 함수는 actions 파일에 만들것이기 때문에 지우고 import 추가해줌

 

6. actions.js 파일생성 후 위에 지운 함수 넣기

 

7. App.jsx - const dispatch = useDispatch(); 추가

+ 상위에 import { useDispatch } from 'react-redux'; 추가

 

8. action.js 에서 아래 코드 작성 (비동기로 처리할 예정)

 

9. reducer.js 에선 일단 아래와 같이 될 것

 

10. action.js -  regions 부터 처리할 것임/ setRegions 작성

 

11. reducer.test.js

 

12. reducer.js 

 

13. App.test.jsx - dispatch 설정

 

14.  App.test.jsx - dispatch 제대로 들어왔는지 test 

 

15. action.js - API를 가져오기 위해 fetchRegions 추가 + 비동기이기에 async await 로 

import ..services>api파일에서 가져올것임

 

16. services>api - API 설정

 

17. services > __mocks__ >api.js  설정

 

18. action.js - fetchCategories 도 설정할 것임

---

19. reducer.test.js - setCategories test도 추가

+ import {setRegions, setCategories, from './actions';  위에도 추가

 

20. action.js 에도 setCategories  추가

 

21.reducer.js 에도 추가

 

22. reducer.js 에서 다음 형식처럼 변경하고 함수[action.type] 해서 불러오면 더 좋을 것같음

이렇게도 가능

>>

 

기본값이나 해당 action 값 나오도록 설정

{"originWidth":604,"originHeight":128,"style":"alignLeft","caption":"내껀 이렇게 작성했는데 아래와 같이 return 값을

정의된게 있으면 앞에 reducers함수값이 나오게 아니면 뒤(defaultReducer)가 나오게 함

 

>>이후 각 부족한 컴포넌트 추가, Test작성

( ex: RegionsContainer.test.jsx:test코드 작성 =>RegionsContainer.jsx에서 code작성 )

---

코드 작성법 참고)

▼ actions.js

 강의 듣기 전 내가 작성한 코드는 (loadRegions, loadCategories, loadRestaurants 함수를 각 써줬음)

=> 강의에서는 loadInitialData 함수 하나를 작성함(Regions, Categories 를 같이 써준 것)

=>반영하여 아래로 수정(주석에서 함수2개가 loadInitialData에 해당됨 )

import {
  fetchRegions,
  fetchCategories,
  fetchRestaurants,
} from './services/api';

export function setRegions(regions) {
  return {
    type: 'setRegions',
    payload: {
      regions,
    },
  };
}

export function setCategories(categories) {
  return {
    type: 'setCategories',
    payload: {
      categories,
    },
  };
}

export function setRestaurants(restaurants) {
  return {
    type: 'setRestaurants',
    payload: {
      restaurants,
    },
  };
}

/* export function loadRegions() {
  return async (dispatch) => {
    const regions = await fetchRegions();

    dispatch(setRegions(regions));
  };
}

export function loadCategories() {
  return async (dispatch) => {
    const categories = await fetchCategories();

    dispatch(setCategories(categories));
  };
} */

export function loadRestaurants() {
  return async (dispatch) => {
    const restaurants = await fetchRestaurants();

    dispatch(setRestaurants(restaurants));
  };
}

export function loadInitialData() {
  return async (dispatch) => {
    const regions = await fetchRegions();
    const categories = await fetchCategories();

    dispatch(setRegions(regions));
    dispatch(setCategories(categories));
  };
}

위를 변경함에 따라 

App.jsx에서도 아래와 같이 변경

import { useEffect } from 'react';

import { useDispatch } from 'react-redux';

import {
  // loadRegions,
  // loadCategories,
  // loadRestaurants,
  loadInitialData,
} from './actions';

import RegionsContainer from './RegionsContainer';
import CategoriesContainer from './CategoriesContainer';

export default function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    // dispatch(loadRegions());
    // dispatch(loadCategories());
    // dispatch(loadRestaurants());
    dispatch(loadInitialData());
  }, []);

  return (
    <div>
      <RegionsContainer />
      <CategoriesContainer />
      <RestaurantsContainer />
    </div>
  );
}

---

코드 작성법 참고)

reducer.js 에서 해당 부분은 아래 두개처럼 작성할 수 있음

위와 동일한데 다르게 작성한 방법

const actionCreators = {
  setRegions(state, { payload: { regions } }) {
    return {
      ...state,
      regions,
    };
  },

  setCategories(state, { payload: { categories } }) {
    return {
      ...state,
      categories,
    };
  },

  setRestaurants(state, { payload: { restaurants } }) {
    return {
      ...state,
      restaurants,
    };
  },
};

---

코드 작성법 참고)

RegionsContainer.jsx 

아래 2개는 동일