개발(라이브러리,프레임워크)/react.js & react native32 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. react-transition-group CSSTransition 의 특징? >>> CSSTransition : 1개 컴포넌트만 변경 아님>> 여러개 가능 Transition 여러개 변경 가능 하이하이 // 글로벌로 지정해줘서 import xx.scss 해주었음 `css .fade-enter { opacity: 0 !important; } .fade-enter-active { opacity: 1 !important; transition: all 0.8s ease !important; } .fade-exit, .fade-enter-done { opacity: 1; } .fade-exit-active { opacity:0; transition: all 0.5s ease !important; } {showingList.map((item: any, i.. 2022. 6. 8. ThemeProvider(styled-components) 모든 파일에 적용할때 손쉽게 사용할 수 있음 index.tsx(or App.tsx에도 가능) const theme: any = { primaryColor: ['#a559f3', '#c282ef'], subColor: ['#8178f9', '#a680fb'], }; // GlobalStyle의 경우 컴포넌트 가장 상단에 위치해야 적용됨 ReactDOM.render( , document.getElementById('root'), ); main.tsx props로 가져와서 사용한다. const MainWrap = styled.div` background-image: linear-gradient( to top, ${(props: any) => props.theme.primaryColor[0]}, ${(props.. 2022. 6. 7. memoization useMemo import { useState , useMemo} from 'react'; function sum(persons){ return person.map((person) => person.age).reduce((l,r) => l+r , 0) } export default function Test2() { const [value, setValue] = useState(''); const [persons] = usetState([ { name: "Mark", age : 39 }, { name: "Hanna", age : 29 } ]); const count = useMemo(() => { return sum(persons); }, [persons]); //dependency list를 인자로 받는.. 2022. 5. 22. 이전 1 2 3 4 5 ··· 8 다음 반응형
