전체 글218 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. promise promise 클래스를 통해서 만들어진 인스턴스를 반환한다. 대기/성공/실패 값을 다루는 일급 값을 다루고 있다. ( 콜백과 차이) 콜백함수는 비동기적인 상황을 다루는것이 코드로만 다루고 있지만 promsie 는 비동기상황에대한 값으로 리턴을 하고있음 콜백으로 실행한함수(a)는 undefined이지만 promise는(b) promise이라는 값을 가지고 있음. 이 결과로 .then을 통해 이후에 내가 하고싶은 일을 추가적으로 할 수 있다. 이 비동기 상황이 값으로써 다뤄지므로 일급함수라고 한다. 어떤 변수에할당, 전달을 할 수 있다. const go1 = (a,f) => f(a); const add5 = a => a+5; go1(10,add5); go1(Promise.resolve(10),add5).. 2022. 3. 6. 이전 1 ··· 3 4 5 6 7 8 9 ··· 55 다음 반응형
