안녕하세요

발단: 스타일드 컴포넌트로 다크모드 구현을 하는 방법을 검색해보면 themeProvider로 구현을 한다. 문제: 하지만 이 방식은 페이지를 리렌더링 하기 때문에 느리다. Changing CSS Variables (e.g. changing themes) is significantly more performant, it doesn’t require React to re-render your entire app (or re-render almost anything in fact) and the changes will be instant. This is why frameworks like Emotion have experiments to use CSS Variables. (100% 리렌더링이 일어나는 지에 대..

https://velog.io/@altjsvnf/TS-TypeScript%EC%97%90%EC%84%9C-Styled-component-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 [TS] TypeScript에서 Styled-component 사용하기 TypeScript에서 styled-component를 사용해보자. velog.io https://sangjuntech.tistory.com/11 [Styled-component] styled-component 좀 더 똑똑하게 쓰기 안녕하세요. 오늘 포스팅할 주제는 'styled-component'입니다! 리액트를 사용하는 분이라면 다양한 css 라이브러리를 사용하실텐데 저는 CSS-IN-JS의 대표적인 라이브러리 중 하나인 style..

1. 컴포넌트에 다크모드 일 때는 박스쉐도우를 넣고 싶지 않다. 2. 컴포넌트에 darkMode 라는 프로퍼티를 만든다. 3. props에 대해서 darkMode가 아닐 때 box-shadow가 나타나도록 한다. 4. 컴포넌트의 타입에는 darkMode?:boolean 으로 타입을 지정해준다. const MainVisualImgBox = styled.div` box-shadow: ${(props) => !props.isDarkMode && `2px 2px 7px -2px ${props.theme.mainBlack}`}; `; 4-2. 베리에이션 여러가지 css를 한 번에 적용하고 싶을 때는 css`` 함수를 사용한다. const ToggleCircle = styled.div` position: absol..

const GlobalStyle = createGlobalStyle` @font-face { font-family: "Pretendard"; src: local('PretendardRegular'), local('PretendardRegular'), url(${PretendardRegular}) format('woff2'); font-weight:400; } 위와 같이 font-face를 적용할 경우에는 리렌더링 되는 동안 폰트가 깜빡이는 현상이 발생한다. styled-component를 이용할 때 리렌더링되는 컴포넌트가 style을 함께 같이 읽어 들여서 새로 적용시키기 때문이다. 따라서, styled-component를 이용하지 않고 일바적으로 폰트를 적용할 때처럼 CDN으로 스타일을 적용시키면 된다..