SPA11 React의 미래: Create React App(CRA) 대신 Vite를 사용하자 최근 React 생태계에 몇 가지 중요한 변화가 있었습니다. Create React App 지원 중단, react.dev 출시, Next.js 및 Remix와 같은 대체 프레임워크의 인기 증가가 포함됩니다. Create React App 추천 X 우선 Create React App이 추천이 되지 않습니다. Next.js 또는 Remix 등을 추천하고 있지만 클라이언트 사이드 핸들링만 하는 경우에는 Vite 또는 Parcel을 권유하고 있습니다. If you’re still not convinced, or your app has unusual constraints not served well by these frameworks and you’d like to roll your own custom setup.. 2023. 4. 15. React memo를 사용하기 전에 리액트를 사용함에 있어서 여러가지 performance 측면의 개선 방법에 대한 글들이 많습니다. 그 중에서 많이 사용되고 있는 React memo에 대한 이야기입니다. 리액트 메모를 사용하기 전에 체크해볼 수 있는 몇 가지 사항들은 다음과 같습니다. production 빌드를 실행 중인지 확인합니다. (개발 빌드는 매우 느립니다.) 상태를 렌더링 트리에서 불필요하게 상속받고 있는지 확인합니다. React DevTools Profiler를 실행해서 리렌더링 되는 부분을 확인해보세요. (Highlight 옵션을 통해서 확인 가능) 만약에 비용이 비싸다면, 컴포넌트 자체를 memo()로 감쌉니다. 그리고 필요한 함수에 useMemo도 추가합니다. 그 외에도, 심각하게 느린 컴포넌트 환경은 많습니다. 그 때,.. 2022. 11. 13. 다크모드를 위해서 Context API보다 CSS 변수를 활용하세요 다크모드를 관리할 때 일반적으로 Context API를 통해서 전체 테마를 바꾸는 ThemeProvider 기법을 많이 사용하게 됩니다. 여전히 CSS-in-JS는 최근 몇 년동안 CSS 사양이 많이 발전하고 개선되고, 최신 브라우저들도 발전함에 따라(Internet explorer의 변명은 더 이상 충분치 않습니다.) ThemeProvider를 사용하지만 많은 사용 사례에서 많은 이점만 있는 것이 아니라는 것을 깨닫게 됩니다. 이모션을 사용한 ThemeProvider의 예시를 살펴보시죠. import * as React from "react"; import styled from "@emotion/styled"; import { ThemeProvider } from "emotion-theming"; co.. 2022. 10. 30. transition에 대한 물리엔진 패키지 - react-spring 마우스 오버 애니메이션은 응용 프로그램이 동적이고 반응적으로 느껴지도록 하는 좋은 방법입니다. 작은 적용으로 전체 제품을 업그레이드 할 수 있는 디테일입니다. 마우스 오버를 사용하지 않고 키보드로 웹을 사용하는 사람들은 Enter를 눌러서 마우스 오버 효과를 활성화 할 수 있습니다. const Boop = ({ rotation = 0, timing = 150, children }) => { const [isBooped, setIsBooped] = React.useState(false); const style = { display: 'inline-block', backfaceVisibility: 'hidden', transform: isBooped ? `rotate(${rotation}deg)` : `ro.. 2022. 8. 21. 이전 1 2 3 다음
