emotion 썸네일형 리스트형 [React] Emotion 태그, 브라우저에서 보기 쉽게 Label Format 설정해주기 emotion 으로 css와 styled를 적용하면 크롬 웹에서 다음과 같이 알수없는 이름들이 뜬다 ! 이를 보기 편하게 labelFormat 해줄 수 있는 babel 설정이 있다. GitHub - emotion-js/emotion: 👩🎤 CSS-in-JS library designed for high performance style composition 👩🎤 CSS-in-JS library designed for high performance style composition - GitHub - emotion-js/emotion: 👩🎤 CSS-in-JS library designed for high performance style composition github.com .babelrc { "pre.. 더보기 [React] Emotion 적용하기 2 - @emotion/react (css-in-js) 👉🏻 설치 // 프레임워크에 구애받지 않는 가장 베이직한 패키지 (VanillaJS 등에서 사용) npm i @emotion/css // react 사용자에게 권장되는 패키지 npm i @emotion/react yarn add @emotion/react 👉🏻 CSS Prop Emotion 사용해서 css-in-js 스타일링을 하려면 CRA의 경우 코드에 /** @jsx jsx*/를, 아닐 경우 .babelrc에 아래와 같이 설정을 추가해준다. - CRA Project /** @jsx jsx */ import { css , jsx } from '@emotion/react'; const color = 'darkgreen'; render ( ) - Set .babelrc { "presets": ["@emot.. 더보기 [React] Emotion 적용하기 1 - @emotion/styled (Styled Components) 🤷🏻♀️ 일반 CSS를 사용하지 않고 Emotion을 사용하는 이유는? JavaScript로 CSS 스타일을 작성하기에 편하게 설계되었기 때문이다.! (css-in-js) 🤷🏻♀️ 그렇다면 Emotion 뿐인가? No! [styled components] 라는 라이브러리도 있음. npm trends에서 지난 6개월간 다운로드횟수를 살펴보니 사용률은 emotion이 좀 더 높았다. @emotion/styled을 먼저 알아보자. 👉🏻 설치 // react에서 스타일 API로 직접 태그를 만들기 위해 사용하는 패키지 npm i @emotion/styled yarn add @emotion/styled 👉🏻 설정 emotion을 적용하기 위해서는 babel의 설정을 바꿔주어야하는데, 만약 react를 CRA .. 더보기 이전 1 다음
