React Native : 리액트 네이티브에서 styled-components 사용하기

리액트 네이티브에서 스타일을 적용하는 방법에는 style속성(Inline style), StyleSheet, styled-components가 있다. 리액트 네이티브에서 사용할 수 있는 스타일 속성은 웹의 CSS와 비슷하지만, 일부 속성은 동작하지 않거나 다르게 처리될 수 있다. 리액트 네이티브에서 지원되는 스타일 속성들은 Image Style Props · React Native 에서 확인할 수 있다.

 

Style 속성

style 속성은 태그 내에 직접 스타일을 작성하는 방식이다. 

import React from 'react';
import { Text, View } from 'react-native';

function App(): React.JSX.Element {
   return (
    <View>
      <Text style={{ color: '#5c9176', textAlign: 'center', fontSize: 35}}>코딩쥐</Text>
    </View>
  );
}

export default App;

---

StyleSheet

RN에서 기본적으로 제공하는 StyleSheet를 통하여 스타일 객체를 생성할 수 있다. React Native에서 제공하는 스타일 속성은 모두 camelCase로 작성된다. 따라서 StyleSheet에서도 스타일 속성을 camelCase로 작성해야 한다.

 

1. StyleSheet.create()를 사용하여 스타일 객체 생성

const styles = StyleSheet.create({
  text: {
   color: '#5c9176',
   textAlign: 'center',
   fontSize: 35
  },
});

 

2. 생성한 스타일 객체를 style 속성에 적용

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

function App(): React.JSX.Element {
   return (
    <View>
      <Text style={styles.text}>코딩쥐</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  text: {
   color: '#5c9176',
   textAlign: 'center',
   fontSize: 35
  },
});

export default App;

---

styled-components

Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리이다. props나 state에 따라 스타일을 동적으로 변경할 수 있다는 장점이 있어 앞으로의 RN 글에서는 styled-components를 사용할 예정이다.

 

1. styled-components를 설치

npm install styled-components

 

2. styled-components 불러오기

import styled from 'styled-components/native'

 

3. styled-components 생성

const StyledText = styled.Text`
   color: #5c9176;
   text-align: center;
   font-size: 35;
`;

 

4. styled-components 사용

<변수명> 태그를 사용해서 styled-components를 사용할 수 있다.

import React from 'react';
import { View } from 'react-native';
import styled from 'styled-components/native';

const StyledText = styled.Text`
   color: #5c9176;
   text-align: center;
   font-size: 35;
`;

function App(): React.JSX.Element {
   return (
    <View>
      <StyledText>코딩쥐</StyledText>
    </View>
  );
};

export default App;