개발(라이브러리,프레임워크)79 Recoil context API context api 단점은 context를 구독하고 있는 하위의 모든것이 재 랜더링 된다. 성능상 문제가 생길 수 있음 낮은 빈도의 업데이트에 적합하다. (정적인 값, 구독을 통해 업데이트를 전파하는 것) 한계 상태 공유를 위해 상위요소까지 끌어올리면 트리가 다 재렌더 될수도있다. context는 단일 값만을 저장할 수 있고, 자체 Consumer를 자기는 여러가지 집합은 담을 수 없다. 최상단부터 트리의 잎까지 코드 분할이 어렵다. Redux한계 store는 외부 요인으로 취급되기때문에 React의 내부 스케줄러에 접근 할 수 없다. Recoil은 내부적으로 React의 상태를 사용하고 있다. 또한 많은 보일러플레이트 코드를 사용해야한다. 그리고 비동기 데이터 처리 또는 계산된 .. 2022. 9. 24. spatial-navigation 사용 중 포커스 막기 키 제어를 하기 위해 spatial-navigation를 사용하는데 거기 기능에서 pause 하면 포커스가 움직이는 것을 멈춘다. 하지만 리모컨에서는 안먹힘.... 그래서 직접 이벤트 리스너를 만들어 이벤트를 막아버렸음 stopFunc(e) { e.preventDefault(); e.stopPropagation(); return false; }, stopKeyEvent() { // 키 이벤트 막기 const all = document.querySelectorAll('*'); for (const item of all) { const el = item; if (el.addEventListener) { el.addEventListener('keydown', this.stopFunc.. 2022. 9. 22. React Transition Group 적용 중 이슈사항 TransitionGroup와 CSSTransition 적용 해보았음 {showingList.map((item: any, index: number) => ( {/* animation 설정 _global.css */} ))} .item-enter-active { opacity: 0 !important; } .item-enter-done { opacity: 1 ; transition: opacity 500ms ease-in; } .item-exit { opacity: 1 !important; } // .item-exit-active { // opacity: 0 !important; // transition: opacity 500ms ease-in; // } // .item-exit-done { // opac.. 2022. 7. 2. react-query 설치 npm i react-query index.tsx import React from 'react'; import ReactDOM from 'react-dom'; import 'index.css'; import { BrowserRouter } from 'react-router-dom'; import reportWebVitals from 'reportWebVitals'; import { Provider } from 'react-redux'; import { store } from 'store/rootReducer'; import GlobalStyle from 'styles/global-styles'; import { QueryClient, QueryClientProvider } from 'react-qu.. 2022. 6. 12. 이전 1 2 3 4 5 ··· 20 다음 반응형
