Prologue

ReactJS(이하 React)와 React Native(이하 RN)에서 사용하는 패키지가 RN에서는 추가로 더 설치해야 하는 dependency가 있을 수 있습니다. 이 차이는 RN이 Native라서 발생합니다.

이번에 비교해 볼 것은, emotion과 styled-components 설치 및 적용 방법할 때 존재하는 차이점입니다.

---

styled-components

# Npm $ npm i styled-components # Npm w/ TypeScript $ npm i styled-components && npm i -D @types/styled-components # Yarn $ yarn add styled-components # Yarn w/ TypeScript $ yarn add styled-components && yarn add -D @types/styled-components

styled-components 패키지 설치시 TypeScript인지 아닌지에 따라서 @types로 시작하는 패키지를 쓸 것인지 아닌지의 차이 정도만 차이가 생깁니다.

React와 RN 사이의 차이점이 없습니다. 성동일

다만, TypeScript로 작업하실 때 RN에서는 다음과 같이 추가 패키지가 필요합니다. (TypeScript 환경 사용할 생각이 아니라면 아래 과정은 스킵)

# Npm w/ TypeScript $ npm i @types/styled-components-react-native # Yarn w/ TypeScript $ yarn add @types/styled-components-react-native

다음과 같이 패키지 여러개를 한번에 입력하여 설치 또는 삭제가 가능합니다.

# Npm w/ TypeScript $ npm i styled-components && npm i -D @types/styled-components @types/styled-components-react-native # Yarn w/ TypeScript $ yarn add styled-components && yarn add -D @types/styled-components @types/styled-components-react-native

.jsx 또는 .tsx에서 import 할 때 불러오는 방법이 다릅니다.

// React import styled from 'styled-components' // RN import styled from 'styled-components/native'

emotion

(이거 말고)

O612는 emotion을 사랑하는데 RN 처음 작업할 때 emotion으로 스타일링 하는 방법을 모르겠어서 엄청 헤맸던 기억이 있습니다.

RN에서도 React에서 작업할 때와 똑같이 설치하고 컴포넌트 import 했더니 에러가 뙇!!! 나에게 이러지마 ㅠㅠ

찾아보니 @emotion/native가 추가로 필요하다는 사실을 알았습니다.

RN이 native 환경이라서 다르게 동작하는 것으로 추측됩니다.

설치는 React, RN 공통 사항 먼저 짚어볼게요.

styled-components와 다르게 emotion은 TypeScript라고 해서 추가로 설치해야하는 패키지는 없습니다.

# Npm $ npm i @emotion/react # Yarn $ yarn add @emotion/react

React에서는 styled라는 패키지가 필요하고, RN에서는 native라는 패키지가 필요합니다.

React.

# Npm $ npm i @emotion/styled # Yarn $ Yarn add @emotion/styled

위 명령어는 다음과 같이 @emotion/react 패키지를 함께 설치할 수 있습니다.

# Npm $ npm i @emotion/react @emotion/styled # Yarn $ yarn add @emotion/react @emotion/styled

RN.

# Npm $ npm i @emotion/native # Yarn $ Yarn add @emotion/native

위 명령어는 다음과 같이 @emotion/react 패키지를 함께 설치할 수 있습니다.

# Npm $ npm i @emotion/react @emotion/native # Yarn $ yarn add @emotion/react @emotion/native

React에서는 @emotion/native 패키지를 설치하면 안되고, RN에서는 @emotion/styled 패키지를 설치하면 안됩니다.

(RN의 @emotion/native 패키지에 styled가 포함되어 있습니다.)

emotion 또한 styled-components 처럼 import 방법이 다릅니다.

// React import styled from '@emotion/styled' // RN import styled from '@emotion/native'

참 쉽죠오~?

---

Epilogue

갓 태어난 아이도 이해할 수 있을 정도로 친절하게 설명해 드렸으니 오늘은 끝!

언젠가 기회가 된다면 사용 예제를 들고 올게요-