React 아웃소싱 팀프로젝트 4일차

앞서 작성했던 코드를 react-query로 리팩토링해보았다.

react-query는 서버에서 데이터를 가져오거나 캐싱, 업데이트 등을 수행하는 라이브러리이다. rest api뿐만 아니라 firebase 웹 sdk에도 사용할 수 있다.

먼저 src폴더 안에 api폴더를 만든 후 post.js라는 이름으로 파일을 만들어주었다.

그리고 firebase함수를 만들었다. getDocs, addDocs를 이용하여 데이터를 가져오고 생성한다.

react-query를 이용하여 firebase를 사용해본다.
데이터를 가져올 때는 useQuery를 사용할 수 있고, 데이터 생성,삭제,변경 등과 같이 데이터를 조작할 때는 useMutation을 사용할 수 있다. 데이터를 등록해 firebase에 추가하는 로직이므로 useMutation을 사용해주었다.

input에 값 입력으로 인해 서버 데이터가 변경됨
-> onSuccess가 일어나면 기존의 Query인 'post'는 무효화
-> 새로운 데이터를 가져와서 'post'를 최신화
-> post들을 갱신
따라서 리액트 앱은 계속해서 최신 상태의 서버 데이터를 유지할 수 있음

팀원분 중에 파일명 대소문자를 바꾸고 싶은 분이 계셨는데 git이 대소문자 구분을 못해서 터미널에서 바꿔줘야 한다는 것을 알게됐다. 터미널에서 git mv 이전이름 새로운이름 하면 된다! 파일은 경로로 적어주면 바뀐다!!!!!