2023-02-22 수요일

✏️ 무엇을 배웠나

1. 리액트 쿼리로 서버 데이터 관리하기

서버 데이터가 필요할 때 각 컴포넌트에서 파이어베이스에 데이터를 요청해서 받아왔는데, 조금 더 효율적으로 그리고 간편하게 다루고 싶었다 .리액트 쿼리로 파이어베이스 데이터를 가져오는 코드를 커스텀훅으로 만들어서 해당 데이터 필요한 곳마다 커스텀훅을 사용해줬더니 코드도 전보다 깔끔해졌다.

import { useQuery } from 'react-query';
import { collection, getDocs } from 'firebase/firestore';
import { db } from '../common/firebase';

export default function usePosts() {
return useQuery(
'posts',
async () => {
const q = collection(db, 'post');
const querySnapshot = await getDocs(q);
const posts = querySnapshot.docs.map((doc) => ({
id: doc.id,
...doc.data(),
}));
return posts;
},
{
cacheTime: 5 * 60 * 1000,
staleTime: 2 * 60 * 1000,
},
);
}

위 커스텀훅을 사용할 때는 커스텀훅만 import해주고 구조분해할당으로 data를 가져와서 필요한 컴포넌트에서 사용했다. 이렇게 해보니까 키값만 인자로 전달해주면 조금 더 범용적인 커스텀훅을 짤 수 있을 것 같다는 생각을 했다.

프로젝트가 최종적으로 끝나기 전까지 이 훅을 발전시켜서 파이어베이스에서 컬렉션 데이터를 가져오기 요청을 하는 부분에서 전부 이 커스텀훅을 사용해서 해결할 수 있으면 좋을 것 같다.

🥵 무엇이 어려웠나

1. 어떻게 하면 더 효율적으로 구조를 잡을 수 있을지

커스텀훅을 짜보니까 이걸 잘 사용하면 프로젝트의 전체 코드 길이도 확 줄일 수 있고, 팀원들이 재사용할 수 있어서 시간을 아낄 수 있을 것 같다. 그런데 어떻게 하면 더 좋은 훅을 짤 수 있을지 감이 잡히지 않는다. 전체적인 구조를 조망하고 그 안에서 재사용할 수 있는 것들을 추려내는 능력이 필요하다는 생각이 들었다. 사실 그런 게 말처럼 쉬운 일은 또 아니니까 오늘은 여기서 만족하고 더 발전시켜 보기로 한다.

🏷️ 오늘의 코멘트

뭔가에 정신을 팔고 있는 상태가 좋다. 개발, 쉽지는 않은데 안 되는 걸 되게 만드려고 여러 가지 생각을 할 때의 그 상태가 좋다. 해결 외 무념무상.