Store과 DB를 혼동해 사용하지 말자.

어떤 일이 있었나....

유저가 속한 프로젝트들을 보여주기 위해 유저의 정보를 이용해 DB에
유저가 속한 프로젝트들의 정보를 가져와야 했다.

 

DB에서 프로젝트들의 정보를 가져오기 까지 완료했다.

그렇다면 가져온 데이터는 어떻게 보관해야 할까? 라는 의문이 들었다.

 

가공은 객체 형식으로 된 데이터를 가져왔기에 비교적 쉽게 가공이 된다 치자.

내가 고민한 보관 방법은 Redux의 store에 보관을 해도 될까였다.

 

데이터를 가져올 방법을 고민하던 중 보게 된 react-query의 useQuery의 설명문을 보다 이런 의견을 보게되었다.

 

DB의 데이터가 업데이트 되도 유저에게는 업데이트 전의 정보가 전달된다.

이 의견을 보니....

흠....

 

아무래도 우리가 만들고 있는 서비스가 실시간 수정이 가능도 하고,

다른 유저가 프로젝트에 새로 입장해도 안보여지면 이상할 것 같았다.

 

그래서 결정한 방법은 react-query의 useQuery를 이용해 데이터를 가져와

가공 후 컴포넌트에 적용시키기로 했다.

코드는 아래와 같다.

...

import { useDispatch, useSelector } from 'react-redux';

...

import { useCookies } from 'react-cookie';
import { getProjectsInfo } from 'api/project/api';
import { useQuery } from 'react-query';

const MyPageContentArea = () => {

  const dispatch = useDispatch()

  const [cookies] = useCookies(['accessToken']);
  
  const projectInfo = useQuery({
    queryKey: ['projectInfo', cookies],
    queryFn: async () => {
      const projectInfo = await getProjectsInfo(cookies.accessToken);
      return projectInfo
    }
  })

...

  if (projectInfo.isLoading) {
    return (
      <div>
        loading
      </div>
    )
  }
  return (
    <div className='mypage_area'>
      ...
      
        <div className='project_list_area_column'>
          {/* 데이터의 갯수만큼 아래의 컴포넌트 생성 */}
          {projectInfo.data.map((e: any, index: number) => {
            return <MyPageProject key={e.projectId} projectInfo={e}/>
          })}
        </div>
        
     ...
    </div>
  )
}

export default MyPageContentArea

 

useQeury를 사용해 컴포넌트 렌더링 시 데이터를 가져오는데,

초기 렌더링 시에는 불러오지 못해 콘솔을 찍어보면 undefined가 나온다.

 

이럴 때 useQeury의 속성인 isLoading을 이용해 로딩 상태를 확인 후 예외 처리할 수 있다.

위에서는 로딩 중 loading이라는 문구를 표시하도록 했다.

 

 

 

추가적으로 useQuery와 useMutation 등 react-query를 잘 정리된 글이 있기에

링크를 걸고 주기적으로 읽자.

(react-query는 서버의 값을 client로 가져오거나 캐싱, 값 업데이트, 에러 행들링 등 비동기 과정을 도와줌)

react-query 개념 및 정리