개발(라이브러리,프레임워크)79 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. devServer proxy 설정 https://create-react-app.dev/docs/proxying-api-requests-in-development Proxying API Requests in Development | Create React App Note: this feature is available with react-scripts@0.2.3 and higher. create-react-app.dev npm install http-proxy-middleware --save //setupProxy.js const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function (app) { app.use( '/api', creat.. 2022. 2. 6. 이전 1 2 3 4 5 6 ··· 20 다음 반응형
