반응형 전체 글93 React :: MUI v4 에서 v5로 버전 업그레이드 하기 (+styled-components) - 2/2 MUI v4에서 v5로 버전 업그레이드 하면서 주의할점! 1. styled-components 사용하는 경우 app.jsx import { ThemeProvider as StyledThemeProvider } from "styled-components"; import { ThemeProvider as MuiThemeProvider, CssBaseline } from "@mui/material"; import { StylesProvider } from "@mui/styles"; styled-components와 MUI에서 제공하는 ThemeProvider를 import 해오는 경로 수정이 선행되어야 한다 (경로 수정 후 에러창 마주할텐데 이건 당연한 것입니다,,,) 2. App.jsx에서 import 경로.. 2023. 2. 15. React :: MUI v4 에서 v5로 버전 업그레이드 하기 (+styled-components) - 1/2 옛날 옛적,,, 프로젝트를 다시 꺼내서 작업하려 보니 MUI 4 버전을 사용하고 있다 스토리북에서 쓰는 MUI가 5버전이다보니,,, 버전 업그레이드가 필요한 상황~~ MUI 문서를 뒤져보면 친절하게 스텝 바이 스텝 설명되어 있다 Migrating to v5: getting started - Material UI This guide explains how and why to migrate from Material UI v4 to v5. mui.com v4에서 v5로 업그레이드 되면서 가장 큰 변화는 JSS기반에서 emotion(CSS-in-js)으로 대체되었다는 것~ (One of the biggest changes in v5 is the replacement of JSS for Emotion as a d.. 2023. 2. 14. React i18n :: key에 콜론(:)이 있을때 권장하지 않는 방식이지만 현재 팀에서 영문 번역 값을 json 파일의 키로 사용하고 있다보니 여러 이슈가 발생하고 있다. common.json { ex.0123:4567:89ab:cdef:0123:4567:89ab:cdef: 'ex.0123:4567:89ab:cdef:0123:4567:89ab:cdef' } 그중 하나로 이렇게 key에 콜론(:)이 들어가 있는 경우인데 (사실 이 경우에 번역이 필요하진 않지만,,) 아무튼 저 키를 번역하면 console.log(t(`ex.0123:4567:89ab:cdef:0123:4567:89ab:cdef`)) // '4567.89ab.cdef.0123.4567.89ab.cdef' 이렇게 'ex.0123:'이 제거되고 4567부터 출력되는 것을 확인할 수 있다. 원인 .. 2023. 1. 26. 리액트에서 컴포넌트의 높이(height), 넓이(width) 구하기 useRef를 이용하자! const Test = props => { const anchorRef = useRef(null); console.log(anchorRef.current?.offsetWidth) // 컴포넌트의 width console.log(anchorRef.current?.offsetHeight) // 컴포넌트의 height return ( hi! )} 주의 offsetWidth, offsetheight 값은 렌더가 완료된 컴포넌트에서 가져올 수 있다. useRef로 가져온 dom이 렌더가 완료되기 전에는 undefined 상태일 수 있기에 반드시 옵셔널 체이닝 '?' 을 해주자! 덧붙여서 const Test = props => { const anchorRef = useRef(null); c.. 2023. 1. 25. 이전 1 2 3 4 5 6 7 ··· 24 다음 반응형