분류 전체보기2 React Query와 커스텀 훅 최근에 진행중인 프로젝트에 들어가서 처음으로 작업한 것은 컴포넌트별로 구현되어있던 API 호출 로직을 useHook과 react-query를 사용하여 리팩토링 진행이었다. 어렴풋이 커스텀훅과 react-query에 대해 알고있었어서, 이번 기회에 좀더 제대로 공부해서 지식을 습득하고자 공식문서와 블로그들, 코드참조한 내용을 정리해보려고 한다. 커스텀 훅을 알기 위해선 먼저 훅이 뭔지 알아보자 훅이란 ? Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다. react 내장 훅 : useState, useEffect, useReducer 등등 커스텀 훅이란? 커스텀 Hook을 만들면 컴포넌트 로직을 함.. 2023. 11. 20. token에 관하여 프로젝트 진행하며 로그인을 구현하게 되면서 자연스럽게 토큰을 관리하게 되었다. 문제 : axios.create()로 api instance 생성하여 headers에 바로 토큰을 넣어서 api 요청시 로그인 후 새로고침하지 않으면 토큰을 정상적으로 받아오지 못하는 현상이 발생했다. 문제 이유 : axios가 매번 header를 업데이트하지 않아서 토큰도 이에 따라 새로고침 전까지는 authorization에 토큰 값이 들어가 있지 않게 된 것이다. 과정 1. 우선 토큰을 어디에 저장하느냐에 대해 로컬스토리지 vs 쿠키 2. 쿠키에 저장했다. 그 후 원래 토큰값을 하드코딩해서 넣어뒀던걸 쿠키에 있는 토큰을 가져와서 axios.create()로 api instance분리된 곳에 넣어주고 싶었는데 documen.. 2023. 11. 11. 이전 1 다음