[React] fetch 사용하여 로컬 json 파일 불러오기 / dispatch 설정

연결 서버가 없는 프로젝트인 만큼 로컬에서 JSON 파일을 연결해 데이터를 받아오는 방법도 있었지만, 후에 서버와 연결을 미리 연습해 보기도 하고, Redux를 연습할 겸 시도해 보았다.

파일 위치

public > categories.json
src > App.jsx
src > actions.js

App.jsx에서 바로 불러오기

  useEffect(async () => {
    const response = await fetch('/categories.json')
    const categories = await response.json()
    console.log(categories.categories, 확인)
  }, [])

가장 골치 아팠던 건 useEffect에 async를 주지 않고 해결해 보려고 했던 점이다.

fetch를 하는 부분에서 복잡한 비동기 처리할 필요 없이 useEffect에 async 처리를 하면 되는데 쉬운 문제인데 오래 걸렸다.

또한 response.json()을 받아오는 부분에서 await 처리가 필수이다.

dispatch 사용하여 처리하기

• App.jsx

useEffect(() => {
    dispatch(loadProductions())
  }, [])

dispatch로 처리할 경우 useEffect에 async를 사용하는것이 아니라.

• actions.js

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

    dispatch(setProductions(categories))
  }
}

Action 안, fetchCategories(같은 로직)을 불러올 때 await 처리를 해주면 된다.

return에 async 처리!