React 애플리케이션의 스타일링은 특히 스타일을 체계적이고 유지 관리하기 쉬운 상태로 유지하려는 경우 어려울 수 있습니다. 이 과정을 간소화하기 위해 이모션 라이브러리는 CSS 위에 더 높은 수준의 추상화를 제공합니다.
이모션이란?
Emotion은 스타일을 관리할 수 있는 간단하고 효율적인 방법을 제공하는 React 애플리케이션 스타일링 라이브러리입니다. 자바스크립트로 CSS를 작성할 수 있으며 컴포넌트 스타일링을 위한 유연한 API를 제공합니다.
Emotion을 사용하여 React 애플리케이션의 스타일을 지정할 때 얻을 수 있는 주요 이점 중 하나는 스타일을 보다 효율적으로 관리할 수 있다는 것입니다. 예를 들어 CSS/SASS로 작업할 때 발생하는 이름 충돌의 위험 없이 여러 컴포넌트에서 동일한 클래스 이름을 사용할 수 있습니다.
이모션 라이브러리는 전체 페이지가 아닌 해당 스타일을 사용하는 컴포넌트에만 스타일을 적용합니다. 이렇게 하면 페이지의 다른 스타일과의 충돌을 피하고 코드를 보다 모듈화하여 재사용할 수 있습니다.
이모션 설치 방법
React 애플리케이션에 이모션 라이브러리를 추가하려면 다음 터미널 명령을 실행하세요:
npm install --save @emotion/react
이제 Emotion 라이브러리가 프로젝트에 설치되어 React 애플리케이션의 스타일을 지정하는 데 사용할 준비가 되었을 것입니다.
Emotion의 css prop을 사용하여 스타일 지정하기
Emotion 라이브러리를 설치했으면 css prop을 사용하여 React 애플리케이션의 스타일을 지정할 수 있습니다. 문자열이나 일반 자바스크립트 객체 형태로 스타일을 전달할 수 있다는 점에서 스타일 프로퍼티와 유사합니다.
/** @jsxImportSource @emotion/react */
import React from 'react';
import {css} from '@emotion/react';
function App() {
return (
<button css={css`
padding: 0.5rem 1rem;
border: none;
font-family: cursive;
border-radius: 12px;
color: #333333;
background-color: inherit;
margin-block-start: 2rem;
margin-block-end: 2rem;
`}>
Click Me
</button>
)
}
export default App;
코드의 첫 번째 줄인 /** @jsxImportSource @emotion/react */는 JSX 파일에 추가해야 하는 특정 주석으로, Emotion 라이브러리를 해당 파일의 JSX 프라그마로 사용해야 함을 나타냅니다.
JSX에서 프라그마는 JSX 구문을 일반 자바스크립트로 변환하는 함수입니다. 기본적으로 React는 React.createElement 함수를 JSX 프라그마로 사용합니다. 하지만 @jsxImportSource 주석을 사용하면 다른 프라그마를 지정할 수 있습니다.
이 경우 @emotion/react 프라그마는 JSX가 Emotion 라이브러리의 jsx 함수를 사용하여 JSX 코드를 변환하도록 지시합니다. JSX 파일에 프래그마 주석을 추가하면 컴포넌트에서 Emotion 라이브러리의 CSS-in-JS 기능을 사용할 수 있습니다.
버튼 컴포넌트는 몇 가지 사용자 정의 스타일이 적용된 버튼을 렌더링합니다. 여기서 CSS 프로퍼티는 버튼 요소에 사용자 지정 스타일을 추가합니다.
css 프로퍼는 중첩 스타일링도 지원합니다. 중첩 스타일링을 사용하면 서로 중첩된 스타일을 작성할 수 있습니다.
예:
/** @jsxImportSource @emotion/react */
import React from 'react';
import {css} from '@emotion/react';
function App() {
return (
<button css={css`
padding: 0.5rem 1rem;
border: none;
font-family: cursive;
border-radius: 12px;
color: #333333;
background-color: inherit;
margin-block-start: 2rem;
margin-block-end: 2rem;
&:hover{
color: #e2e2e2;
background-color: #333333;
}
`}>
Click Me
</button>
)
}
export default App;
이 예제에서 호버 스타일 선언은 CSS 프로퍼티의 중첩 스타일링 기능을 사용합니다. 위 코드 블록의 배경과 글꼴 색상은 버튼 위로 마우스를 가져갈 때마다 변경됩니다.
객체 스타일을 css 프로퍼티에 전달하기
css 프로퍼티는 일반 JavaScript 객체 스타일도 허용합니다. 여러 컴포넌트의 스타일을 지정할 때 객체 스타일을 활용하면 컴포넌트에서 스타일을 재사용할 수 있습니다.
객체 스타일을 css 프로퍼티에 전달하려면 스타일을 자바스크립트 객체로 정의하고 이를 프로퍼티에 전달합니다:
const style = {
padding: '0.5rem 1rem',
border: 'none',
fontFamily: 'cursive',
borderRadius: '12px',
color: '#333333',
backgroundColor: 'inherit',
marginBlockStart: '2rem',
marginBlockEnd: '2rem',
'&:hover': {
color: '#e2e2e2',
backgroundColor: '#333333',
}
}
return (
<div className="app">
<button css={ style }>Click Me</button>
</div>
);
CSS 속성 이름이 하이픈으로 연결되지 않고 대/소문자로 구분된다는 점에 유의하세요. 이는 스타일이 자바스크립트 객체로 정의되며, 자바스크립트 객체는 대/소문자 명명 규칙을 사용하기 때문입니다.
스타일 컴포넌트를 사용한 스타일 지정
이모션 라이브러리는 React 애플리케이션의 스타일을 지정할 때 스타일 컴포넌트도 사용합니다. 스타일 컴포넌트를 사용하는 것은 기본적으로 스타일이 포함되어 있다는 점을 제외하면 React 컴포넌트와 유사합니다. 스타일이 지정된 컴포넌트를 만들려면 스타일이 지정된 함수를 사용합니다.
스타일 함수를 사용하면 재사용 가능한 스타일 컴포넌트를 만들 수 있습니다. 스타일 함수를 사용하려면 감정/스타일 라이브러리에서 가져옵니다.
애플리케이션에서 @emotion/styled 라이브러리를 가져오려면 프로젝트에 라이브러리를 설치합니다. 프로젝트의 터미널에서 다음 명령을 실행하면 됩니다:
npm install @emotion/styled
@emotion/styled 라이브러리를 설치한 후 스타일이 지정된 함수를 임포트하고 스타일을 정의합니다:
import styled from "@emotion/styled";
const Button = styled.button({
padding: '0.5rem 1rem',
border: 'none',
fontFamily: 'cursive',
borderRadius: '12px',
color: '#333333',
backgroundColor: 'inherit',
marginBlockStart: '2rem',
marginBlockEnd: '2rem',
'&:hover': {
color: '#e2e2e2',
backgroundColor: '#333333',
}
})
export default Button;
위의 코드 블록에서 스타일이 지정된 컴포넌트 버튼이 만들어집니다. 다른 React 컴포넌트와 마찬가지로 이 Button을 React 애플리케이션에서 사용할 수 있습니다.
이와 같이:
import React from 'react';
import Button from './Button';
function App() {
return (
<div>
<Button>Click Me</Button>
</div>
);
}
export default App;
App 컴포넌트를 렌더링하면 버튼 컴포넌트에 정의된 스타일이 적용된 버튼이 화면에 표시됩니다.
스타일 함수는 문자열 스타일도 허용합니다. 객체 스타일 접근 방식과는 다르게 보이지만 기능은 비슷합니다.
import styled from "@emotion/styled";
const Button = styled.button`
padding: 0.5rem 1rem;
border: none;
font-family: cursive;
border-radius: 12px;
color: #333333;
background-color: inherit;
margin-block-start: 2rem;
margin-block-end: 2rem;
&:hover {
color: #e2e2e2;
background-color: #333333;
}
`
export default Button;
Emotion으로 효율적인 스타일링
Emotion은 스타일을 관리할 수 있는 간단하고 효율적인 방법을 제공하는 강력한 라이브러리로, React 컴포넌트를 스타일링할 수 있는 라이브러리입니다. 초보자이든 숙련된 개발자이든, Emotion은 React 애플리케이션의 스타일 지정 프로세스를 단순화하고 코드를 더 쉽게 유지 관리하고 확장할 수 있도록 도와줍니다.
따라서 React 컴포넌트를 보다 효율적이고 유연하게 스타일링할 수 있는 방법을 찾고 있다면 Emotion을 고려해 보세요.