시냅스

Zustand GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React 🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub. github.com 미니 리덕스... 리덕스의 보일러 플레이트에 관한 피로감이 상당하기 때문에 간단한 state를 다루기에 Zustand는 굉장히 유용하다. import create from 'zustand' const useStore = create(set => ({ bears: 0, increasePopulation: () => set(..

Reqct-Query React Query Hooks for fetching, caching and updating asynchronous data in React react-query.tanstack.com 데이터 무결성을 위해 각각의 request에 key를 부여하여 최신 데이터를 참조할 수 있게 보장한다. axios의 경우 요청에 실패할 때에 interceptor를 통해 재요청, 새로고침을 해줘야 하는데 React-Query 는 라이브러리에서 자동으로 처리한다. (window가 다시 포커스 되거나, 네트워크가 다시 연결되거나, 특정 쿼리 인스턴스가 다시 만들어졌을 때 등) npm i react-query yarn add react-query 사용법 Setting import { QueryClient..

React Hook Form : 공식 문서 react hook form 은 form 을 제어할 때에 쓰이면 효과적인 라이브러리이다. 사용하면서의 개인적인 소감은 ref나 객체로 만들어야 하는 후처리가 줄어들어 굉장히 좋은 경험을 했다. 유효성 검사나, onChange 시의 렌더링 횟수도 줄어 성능 측면에서 효과적이라고... 공식문서는 이야기 한다. 또한 TS도 기본적으로 지원한다고 한다 사용법 npm install react-hook-form yarn add react-hook-form import React from "react"; import { useForm } from "react-hook-form"; export default function App() { const { register, han..

프로젝트의 루트디렉토리(package.json 과 같은 뎁스!) 에서 .env 폴더를 작성하고 REACT_APP_TEST=localhost 와 같이 작성한다. 주의해야 할 점은 REACT_APP 이 꼭 붙어있어야 하고, 띄어쓰기나 따옴표가 있으면 안된다. 이후 사용하고 싶은 컴포넌트 내부에서 import dotenv from 'dotenv' dotenv.config() console.log('DB_HOST', process.env.REACT_APP_TEST) 를 추가해주면 정상적으로 실행된다. 만약 작동되지 않는다면 서버를 껐다 키시길 추천드린다.

TypeError: Cannot read properties of undefined (reading 'pathname') ConnectedRouter : connected-react-router 와 Routes : react-router-dom을 쓰던 중 react-router-dom 을 가장 최신인 v6 로 했을 때에 발생한 에러다. 버전 체크에 관한 공식문서 등은 찾지 못하였고, 차선책으로 react-router-dom 을 5.3.0으로 다운그레이드 하여 해결했다고 생각했지만... Uncaught Could not find router reducer in state tree, it must be mounted under "router" ConnectedRouter 에 history를 props로 전달..

Hook 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into)할 수 있게 해주는 함수 사용규칙 최상위에서만 사용해야 한다 React 함수 컴포넌트 내에서만 호출해야 한다 State Hook useState state, setState 함수를 쌍으로 제공 이벤트 핸들러나 다른 곳에서도 호출 가능 const [state, setState] = useState(() => { const initialState = someExpensiveComputation(props); return initialState; }); 위와 같이 렌더링 초기에만 initialState를 사용할 수 있음 초기렌더링이 고비용일 때 이용 가능, 렌더링 이후 initialSt..

Code splitting : 번들이 거대해져 로드 시간을 줄이기 위해 코드를 분할한다. (lazy init...?) import import("./math").then(math => { console.log(math.add(16, 26)); }); Webpack 이 위 구문을 만나면 앱의 코드를 분할함, CRA를 사용한다면 WebPack에서 구성 되어 있음 React.lazy : 서버 사이드 렌더링에서는 불가, Loadable Components 사용해야 함. const OtherComponent = React.lazy(() => import('./OtherComponent')); import 를 동적으로 호출, Promise로 반환 import React, { Suspense } fro..