Style

alajillo·2021년 10월 8일
0

React

목록 보기
6/12
post-thumbnail

Emotion 라이브러리

css를 따로 스타일시트로 분리하지 않고 자동적으로 컴포넌트 내부에서 쓸수 있게 해주는 라이브러리

@emotion/react

 <!-- 기존 html 작성방식 -->
import css from './index.css' 
//기존 JSX 작성방식
const style={
width : 100,
height : 100,
backgroundColor : "tomato"
}
<div style={style}></div> 
// emotion 이용 css 작성 방식
const circleStyle = css`
style 작성
`
const circleStyle = css({
style 작성
})

<div css={circleStyle}></div>

react 내부에서 동작하도록 만들어주는 라이브러리로 위에 코드 처럼 css를 각 컴포넌트마다 관리할수 있도록 스타일을 제공해준다. Vue에서 template 태그, script 태그, style태그를 모두 한 컴포넌트 안에서 관리하는 것처럼 리액트도 컴포넌트 내부에서 html구조, javascript, css 스타일 을 모두 관리 할수 있다.

@emotion/styled

const circleButton = styled.button`
	border-radious : 50%;
`

일반적인 @emotion/react를 사용할 때에는 스타일 속성을 따로 정의해 준 뒤 태그에 붙여주는 형식이였다면 @emotion/styled는 html과css를 묶어서 JSX로 반환하는 기능을 해준다.

@emotion/babel-plugin

babel은 새로운 기능을 추가해주는 것이 아니다. babel의 목적은 해석을 해주는 것이고 emotion 라이브러리를 빌드할때 해석을 도와주는 plugin이다.

babel-plugin을 사용하기 위해서는 .babelrc라는 파일을 루트 경로 만들어 줘야하는데 React-create-app에서는 사용할수 없다.

craco(Create React App Config Override)

그렇기 때문에 craco라는 라이브러리의 도움을 받아서 react에서도 babel를 사용할수 있다.

craco는 craco.config.js 라는 파일을 통해서 설정 값들을 덮어 쓸수 있도록 해준다.

module.exports = {
  babel : {
    presets : ["@emotion/babel-preset-css-prop"]
  }
}

이런식으로 .babelrc 파일에 설정되어야 할 값들을 다시 적어줘서 덮어쓰기를 한 덕분에 react-create-app을 통해서 만든 프로젝트에서도 다양한 설정을 할 수 있다.

profile
Developer's High

0개의 댓글