오늘 진행한 일
-
프론트엔드 회의에서 Redux툴킷이 아닌 React Query에 대한 의견이 나와 학습
-
질문 리스트에서 해당 질문 클릭시 해당 질문 상세페이지로 가는 링크 설정 및 CSS 수정
<StyledUserLink to={`/questions/:${el.id}`}>
<QuestionTitle>{el.questionTitle}</QuestionTitle>
</StyledUserLink>React Query
스토어가 점점 API 요청 수행으로 비대해졌고 Redux의 코드 또한 매우 복잡하다는 단점이 있습니다.
React Query는 위와 같은 Redux를 사용한 API 요청과 비동기 데이터 관리의 불편함을 해소하기 위해 사용됩니다.
React에서 비동기 데이터를 관리하기 위한 라이브러리 입니다.
React Query는 API 요청 및 상태 관리를 위해 규격화된 방식을 제공합니다.
공식문서 https://tanstack.com/query/v4/docs/overview
학습한 레퍼런스 https://tech.kakaopay.com/post/react-query-1/#react-query-%EC%86%8C%EA%B0%9C
영상 레퍼런스 https://www.youtube.com/watch?v=MArE6Hy371c&t=3135
내일 진행해야할 일
-
api가 완성되는대로 기능구현 (질문과 답변 CRUD 및 로그인, 회원가입)
-
프론트엔드 회의를 통해 React Query 사용 결정
오늘 어려웠던 점 & 회고
진행한 일 중 질문 리스트에서 해당 질문 클릭시 해당 질문 상세페이지로 가는 링크 설정하는 과정에서 너무 어렵게 생각한 것 같습니다.
처음 생각은 Link to 컴포넌트에 온클릭으로 아이디 값을 받아와야 겠구나 라고 생각을 했고
리스트 제목을 눌렀을 때에 초점을 맞춰 onclick이벤트를 걸어줘야겠구나 라는 생각을 했습니다.
그래서 onclick이벤트로 이것저것 삽질을 꽤나 오래했습니다.
그렇게 시간이 꽤나 흐른 후 스터디원에게 질문을 했고 Link to 컴포넌트에 파라미터를 question id로 주면된다는 답을 받았습니다.
처음 생각한 것과 비슷한 경우라서 다시 천천히 생각해보았고 그 후 api에서 get요청으로 받아오는 데이터에 question id가 있다는걸 깨달았습니다. 눈 앞에 두고 멀리 돌아갔다온 기분이었지만 그래도 해결해서 다행이었습니다.
아직 백엔드에서 api가 완성되지 않아 프론트엔드 진행이 조금 더딘것 같습니다.
프리프로젝트 후반에 일을 몰아서 하게 될 것 같아 불안한 상황이지만 다들 열심히 진행중이기 때문에 곧 완성될 것이라 생각합니다!
