구버전/React
-
[SWR] Data의 reavalidate, mutate 활용구버전/React 2023. 11. 3. 11:39
swr의 기본적인 사용방법에 대해서는 다른 글을 참고하는게 낫다 이것은 오로지 swr을 통해서 가져온 data를 어떻게 revalidate하는게 좋고 mutate를 어떨 때 사용하는게 좋고 optimistic UI를 어떻게 사용해야하는지에 대해서 내가 볼려고 적어 놓은 것임 개요 SWR의 이점 revalidate란? mutate란? optimisticUI란? key의 활용 (조건부 데이터 가져오기, token전달) SWR 장점 빠르고, 가볍고, 재사용 가능한 데이터 가져오기 React-query와 마찬가지로 데이터를 불러올 때 사용되는데 SWRconfig를 통해 전역설정만 하고 fetcher만 설정해 놓는다면 간단하게 사용할 수 있는 구조이다. (전역설정 안해도 됨 그러면 따로 fetcher를 매번 작성..
-
[전역상태관리] Recoil구버전/React 2023. 11. 2. 21:03
recoil을 사용하기에 앞서 상태관리라이브러리로써 가장 많이 사용되는 Redux와 비교를 안해볼 수 없다. 상태관리 비교 개요 RecoilRoot Atom Selector Recoil-persist RecoilRoot export const App = () => { return ( ) } Atom import {atom} from 'recoil'; export const todoState = atom({ key: "todoState", default: [] }) 장점 Redux에 비해 적은 boilder plate 사용하기 편한 구조 Recoil에서 가장 좋은 점은 학습하기 쉬운 구조로 되어있다는 것이다. React를 사용하면 기본적으로 사용하게 되는 useState와의 구조가 매우 흡사하기 떄문이다...
-
[React] react-router-dom의 사용구버전/React 2023. 10. 4. 21:45
1. 중첩 라우팅 Outlet & 직접표기 비교 > Router.js > Web.js const Web = () => { return ( This is Web Post #1 // 여기서 Outlet을 통해서 불러오는 곳 ); }; > Router.js > Web.js const Web = () => { return ( This is Web Post #1 // 비교부분 ); }; 결론 : 중첩라우팅을 통해서 Router.js 부분에 Route를 한눈에 볼 수 있게 되었음 2. useLocation && useParams && useNavigate 1) useLocation Hook 경로정보를 담고있는 객체를 return한다. { pathname: '/product/1', search: '', hash: '..
-
[Vite] ESlint 와 Prettier, Package.json 초기설정구버전/React 2023. 10. 2. 22:27
https://velog.io/@navyjeongs/vite%EB%A1%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%B4%88%EA%B8%B0-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0-1-with.-typescript-eslint-prettier-husky-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C 위 블로그를 참고해서 초기설정을 해보자~ 절대경로 설정 간에 트러블 슈팅 1. eslint의 설치 과정에서 에러 test용 project에서 절대경로 설정이 성공하였다. 차이점: eslint 설정 간에 차이가 있다. 성공작 : eslint를 설정하는 과정에서 npx eslint ..