팀 프로젝트에서 emotion.js를 사용하기 위해 정리한 내용입니다.

 
 

## ✏ 주요 Emotion.js의 컴포넌트와 사용 목적


### Global

**사용 목적**

- 모든 컴포넌트에 동일한 스타일이나 reset css를 적용시킬 때 사용합니다.

 

### styled

**사용 목적**

- 스타일링된 html 태그를 변수에 담아 관리하기 위해 사용합니다.

 

**장점**

- 자주 사용하는 공용 컴포넌트(button, input)들을 styled로 생성해 관리하기 편합니다.
- props에 따라서 UI 변경이 가능합니다.
- 컴포넌트 단위의 재사용성 매우 높습니다.

 

**단점**

- styled를 사용하여 생성한 컴포넌트는 태그명만 보고서는 어떤 태그를 사용한지 알 수 없습니다.
 
 ```jsx
 ...
 <ContentTitle>
 	PABLO
 </ContentTitle>
 ...
 // 해당 태그만 보고서는 p 태그인지 h1 태그인지 h2 태그인지 알 수 없음
 ```
 
 때문에 직접 선언부를 찾아서 확인해야합니다.
 
 ```jsx
 ...
 const ContentTitle = styled.h1`
 	color: ...
 `
 ...
 // 소스코드 상단 어딘가에 있을 선언부
 ```
 
 
이러한 styled 컴포넌트가 한두개라면 금방 찾을 수 있지만 남발해서 사용하면 코드가 복잡해지고 어떤 태그인지 확인해야하는 불편함을 느낄 수 있기 때문에 재사용성이 높은 컴포넌트에만 사용하는게 좋아보입니다.

 

### css

**사용 목적**

변수에 css를 정의하여 관리하거나 html 태그에 인라인 css로 작성하기 위해 사용합니다.

 

**장점**

- html 태그에 직관적인 css 스타일링이 가능하여 작업 속도 향상에 유리합니다.
- 스타일링 코드 단위의 재사용성 유리합니다.

 

**단점**

- 모든 스타일링을 css로 사용하면 지저분해 보일 수 있습니다.

 
 

## 🎨 자주 사용하는 스타일 정의


자주 사용하는 색상이나 스타일 요소들은 따로 정의하고 불러와서 사용하는 방식으로 사용하는 것이 편해보입니다.

```jsx
// styles/colors.js
export const brand = "#ff4655";
export const white = "white";
export const black = "black";
export const gray10 = "#f1f1f4";
export const gray20 = "#e4e5e9";
export const gray30 = "#bfc6cc";
export const gray40 = "#434e58";
export const gray50 = "#6f7077";
```

```jsx
// styles/media-queries.js
export const large = "@media (min-width: 1200px)";
export const medium = "@media (min-width: 992px) and (max-width: 1199px)";
export const small = "@media (max-width: 991px)";
```

 

padding, margin 같은 경우에는 디자인팀에서 동일한 단위을 사용하기 때문에 (4px 단위, 8px 단위 등) 따로 관리하여 사용하는 것이 더 직관적이고 편합니다.

 

또한 이러한 스타일링 요소에 수정사항이 발생하면 ui.js 파일만 수정하면 되기 때문에 작업 효율이 좋습니다.


```jsx
// styles/ui.js
import { css } from "@emotion/react";

const unit = 4

export const spacing = {
 mt: (value) => css`
 margin-top: ${value * unit}px;
 `,
 mb: (value) => css`
 margin-bottom: ${value * unit}px;
 `,
 ml: (value) => css`
 margin-left: ${value * unit}px;
 `,
 mr: (value) => css`
 margin-right: ${value * unit}px;
 `,
 mx: (value) => css`
 margin-left: ${value * unit}px;
 margin-right: ${value * unit}px;
 `,
 my: (value) => css`
 margin-top: ${value * unit}px;
 margin-bottom: ${value * unit}px;
 `,
 m: (value) => css`
 margin-top: ${value * unit}px;
 margin-bottom: ${value * unit}px;
 margin-left: ${value * unit}px;
 margin-right: ${value * unit}px;
 `,
};
```
 

>사용 예시

```jsx
// 스타일 정의 없이 사용했을 때
<div
 css={css`
 color: #ff4655;

 @media (min-width: 1200px) {
 margin: 12px;
 }
 @media (min-width: 992px) and (max-width: 1199px) {
 margin: 8px;
 }
 @media (max-width: 991px) {
 margin: 4px;
 }
 `}
>
...
</div>

// 스타일을 정의하고 사용했을 때
<div
 css={css`
 color: ${colors.brand};

 ${screen.large} {
 ${spacing.m(3)}
 }
 ${screen.medium} {
 ${spacing.m(2)}
 }
 ${screen.small} {
 ${spacing.m(1)}
 }
 `}
>
...
</div>

// 무엇보다 styled로 생성한 공용 컴포넌트와 함께 사용하기 좋습니다.
// 공용 컴포넌트들은 사용하는 페이지마다 margin 같은 요소들이 차이가 있는데
// 기존에 정의한 css를 배열로 추가해서 편하게 사용할 수 있습니다.
const Button = styled.button`
 color: ${colors.white};
 background-color: ${colors.brand};
 border: none;
`;

<Button css={[spacing.mx(3), spacing.my(4)]}>버튼</Button>
```

 
 

## 🎁 공용 컴포넌트 생성

많은 페이지에서 재사용하는 Button, input, box 등과 같은 컴포넌트들은 공용 컴포넌트로 분리하여 만들어 두는 것이 재사용성에 좋습니다.

 

### 네이밍 규칙

UI 특징 + UI 명칭

ex) `Button`, `OutlinedButton`, `TextButton`, `LinkButton`, `Input`, `SearchInput`

 

### 코드 작성 방식

components 폴더 안에 UI 명칭의 js or ts 파일을 생성하고 styled를 사용해 모든 컴포넌트가 동일하게 사용할 기본 Base 컴포넌트를 만들고 Base 컴포넌트를 기반으로 다른 컴포넌트를 만드는 방식

 

> 작성 예시

```jsx
// components/common/Button.js

// 모든 버튼 컴포넌트의 뼈대, 모든 버튼에서 동일한 요소만 가지고 있습니다.
const Base = styled.button`
 cursor: pointer;
 border: 1px solid;
 ${({size}) => {
 switch (size) {
 case "small":
 return css`
 padding: 8px;
 font-size: 12px;
 `;
 case "normal":
 return css`
 padding: 12px;
 font-size: 14px;
 `;
 case "large":
 return css`
 padding: 16px;
 font-size: 16px;
 `;
 default:
 return css`
 padding: 12px;
 font-size: 14px;
 `;
 }
 }}
`;

// 일반 버튼
export const Button = styled(Base)`
 color: ${colors.white};
 ${({color}) => {
 switch (color) {
 case "gray":
 return css`
 background-color: ${colors.gray40};
 border-color: ${colors.gray40};
 `;
 case "brand":
 return css`
 background-color: ${colors.brand};
 border-color: ${colors.brand};
 `;
 default:
 return css`
 background-color: ${colors.black};
 border-color: ${colors.black};
 `;
 }
 }}
`;

// 외각선 버튼
export const OutlinedButton = styled(Base)`
 background-color: ${colors.white};
 ${({color}) => {
 switch (color) {
 case "gray":
 return css`
 color: ${colors.gray40};
 border-color: ${colors.gray40};
 `;
 case "brand":
 return css`
 color: ${colors.brand};
 border-color: ${colors.brand};
 `;
 default:
 return css`
 color: ${colors.black};
 border-color: ${colors.black};
 `;
 }
 }};
`;
```


 
 

## 📌 참고


[https://emotion.sh/docs/introduction](https://emotion.sh/docs/introduction)

[https://brunch.co.kr/@kmongdev/17](https://brunch.co.kr/@kmongdev/17)

팀 프로젝트에서 emotion.js를 사용하기 위해 정리한 내용입니다.

 
 

## ✏ 주요 Emotion.js의 컴포넌트와 사용 목적


### <span style="color: #73

Emotion.js 사용 전 정리