React.js와 React Native 컴포넌트를 동일한 style 코드로 적용하자

styled-components를 사용해야 하는 이유

 컴포넌트에 스타일을 적용하는데에 있어 React.js와 React Native는 서로 다른 문법의 스타일을 적용하고 있다.

(예> background-color (React.JS), backgroundColor (RN))

이는 정말 사소한 차이지만 코딩시 정말 헤깔리게 할 수 있다. 이를 간단히 해결 할 수 없을까?

styled-components를 이용하면 된다!

공용 스타일 코드 외에도 많은 유용한 기능을 제공한다.

이를 이용하면 component style과 layout을 완벽히 분리 시킨 깔끔한 코드가 만들어 지는것도 덤으로 얻을 수 있는 장점이다.

 

설치방법

$ yarn add @types/styled-components styled-components

 

VSCode Extension: vscode-styled-components를 설치하면 자동완성으로 속성들을 지정 할 수 있으니 매우 편하게 사용 가능하다!

 

사용방법

주의 할 점은 import 할 모듈이 다르므로 주의하자!

 

RN 사용시:

import styled from 'styled-components/native';

 

React.js 사용시: 

import styled from 'styled-components';

 

 

 

공식 사이트를 통해서 사용법을 숙지하도록 한다.

styled-components

 

참고자료: https://blog.logrocket.com/8-reasons-to-use-styled-components-cf3788f0bb4d/