스타일 컴포넌트

React Native에는 기본적으로 스타일링을 위한 StyleSheet이라는 API가 존재합니다. 하지만, 많은 개발자들은 CSS-in-JS 방식의 스타일링을 선호하는데, 이를 위해 styled-components나 @emotion/native와 같은 외부 라이브러리를 사용하여 React Native에서도 웹 개발에서의 styled-components 방식으로 스타일 코드를 작성할 수 있습니다.

즉, React Native 앱 개발 시 기본 제공되는 스타일링 방식 외에도 웹에서의 스타일링 경험을 그대로 가져와서 사용할 수 있도록 도와주는 여러 외부 라이브러리가 존재합니다.

CSS-in-JS

CSS-in-JS는 웹 개발에서 스타일링을 위한 패러다임 중 하나로, JavaScript 코드 내부에서 CSS 스타일을 작성하게 해주는 방법론입니다. CSS-in-JS의 주요 장점 및 특징은 다음과 같습니다.

컴포넌트 기반: CSS-in-JS는 주로 리액트와 같은 컴포넌트 기반 프레임워크와 잘 어울립니다. 각 컴포넌트의 스타일이 해당 컴포넌트 파일 내에 포함되기 때문에, 컴포넌트의 독립성과 재사용성이 증가합니다.
동적 스타일링: JavaScript 변수와 함수를 활용하여 스타일을 동적으로 생성할 수 있습니다. 이는 사용자 상호작용이나 상태 변경에 따라 스타일을 바꾸고 싶을 때 유용합니다.
스코프 문제 해결: 전통적인 CSS에서는 전역 스코프 문제로 인해 다른 스타일과 충돌이 일어날 수 있습니다. CSS-in-JS는 이 문제를 해결하며, 스타일 충돌 위험을 줄여줍니다.
편의 기능: 많은 CSS-in-JS 라이브러리들은 자동화된 vendor prefixing, 서버 사이드 렌더링 지원, 테마링 등의 추가적인 기능을 제공합니다.
빌드 최적화: 사용되지 않는 스타일은 제거하여 최종 번들의 크기를 줄일 수 있습니다.

대표적인 CSS-in-JS 라이브러리로는 styled-components, @emotion/core, styled-jsx, jss 등이 있습니다.

하지만 CSS-in-JS에도 몇 가지 단점이 있습니다.

학습곡선: 기존의 CSS나 SCSS와는 다른 접근 방식을 필요로 하므로, 학습에 약간의 시간이 필요할 수 있습니다.
런타임 오버헤드: JavaScript를 통해 스타일을 계산하고 적용하는 과정은 약간의 성능 오버헤드를 초래할 수 있습니다.
툴링 지원: 일부 개발 툴이나 에디터에서는 CSS-in-JS의 문법에 완전히 최적화되지 않은 경우가 있습니다.

최종적으로, 프로젝트의 요구사항과 개발팀의 선호에 따라 CSS-in-JS를 사용할지, 다른 스타일링 방법론을 사용할지 결정하게 됩니다.

Styled Components

styled-components는 CSS-in-JS의 방법론 중 가장 인기 있는 라이브러리 중 하나입니다. React (그리고 React Native)와 같은 컴포넌트 기반의 라이브러리나 프레임워크를 위해 디자인된 styled-components는 자바스크립트 파일 내에서 스타일링을 할 수 있게 해줍니다.

styled-components의 주요 특징 및 장점은 다음과 같습니다.

명확한 컴포넌트 스타일링: 각 컴포넌트에 대한 스타일을 해당 컴포넌트 코드와 같은 위치에서 정의할 수 있습니다.
```
const Button = styled.button`
  background: palevioletred;
  color: white;
  border-radius: 3px;
`;
```

동적 스타일링: Props를 통해 동적으로 스타일을 바꿀 수 있습니다.

const Button = styled.button`
  background: ${(props) => (props.primary ? "palevioletred" : "white")};
  color: ${(props) => (props.primary ? "white" : "palevioletred")};
`;

테마 설정: styled-components는 ThemeProvider를 통해 쉽게 테마링을 지원합니다.

const theme = {
  primaryColor: "palevioletred",
  secondaryColor: "white",
};

<ThemeProvider theme={theme}>
  <Button primary>Click Me</Button>
</ThemeProvider>;

서버 사이드 렌더링 지원: SEO와 초기 로드 성능을 위한 서버 사이드 렌더링을 지원합니다.
자동 Vendor Prefixing: 브라우저 간 호환성을 위해 자동으로 vendor prefix를 추가합니다.
전역 스타일링: createGlobalStyle을 사용하여 전역 스타일을 정의할 수 있습니다.

styled-components는 그 외에도 많은 편리한 기능과 확장성을 제공하며, 커뮤니티에서도 활발하게 지원되고 있습니다. 그렇기 때문에 많은 프로젝트와 개발팀에서 선호하는 스타일링 라이브러리 중 하나입니다.

Emotion 🏆

Emotion은 CSS-in-JS 라이브러리 중 하나이며, styled-components와 유사한 기능을 제공하는 동시에 자신만의 특징과 장점을 가지고 있습니다. 웹 뿐만 아니라 React Native와 같은 플랫폼에서도 간편하게 스타일링할 수 있게 도와줍니다.

Emotion의 주요 특징 및 장점은 다음과 같습니다:

높은 성능: Emotion은 성능 최적화를 중요시합니다. 큰 애플리케이션에서 이 성능의 차이는 더욱 명확하게 느껴질 수 있습니다.
스타일 작성의 유연성: Emotion은 styled API와 css prop을 이용한 인라인 스타일링을 통해 다양한 방식으로 스타일을 작성할 수 있습니다.
```
// styled API 예시
const Button = styled.Text`
  color: hotpink;
`;

// css prop 예시
<Text
  css={`
    color: hotpink;
  `}
>
  Hello
</Text>;
```
테마 설정: ThemeProvider를 통해 애플리케이션 전체에 테마를 적용하고 관리할 수 있습니다.
컴포지션: 다양한 스타일을 쉽게 조합하고 재사용할 수 있습니다.
서버 사이드 렌더링 지원: SEO와 초기 로드 성능 향상을 위해 서버 사이드 렌더링을 지원합니다.
개발자 경험: 레이블링, 소스 맵, 디버깅 도구 등을 통해 향상된 개발 경험을 제공합니다.
Babel 플러그인: 최적화된 CSS 코드 생성과 레이블링 등을 위해 Babel 플러그인을 제공합니다.

Emotion과 styled-components는 많은 유사점을 가지고 있지만, 특정 기능이나 성능, API 디자인에서의 차이점이 있습니다. 따라서 개발팀의 요구사항이나 선호도에 따라 적합한 라이브러리를 선택하는 것이 중요합니다.

또한, 여러 프로젝트나 라이브러리에서 Emotion을 선택하고 채택하고 있음을 알 수 있습니다. 예를 들면, 대표적인 리액트 UI 라이브러리인 Material UI는 v5부터 emotion을 사용하고 있고, 커뮤니티에서 개발된 dooboo-ui 프레임워크 역시 emotion을 사용하고 있습니다.

React Native에서의 emotion 사용은 약간 다른 접근 방식이 필요하며, 필요한 패키지와 설정을 통해 쉽게 스타일링을 할 수 있습니다.

CSS-in-JS​

Styled Components​

Emotion 🏆​

CSS-in-JS

Styled Components

Emotion 🏆