[RN] React Native 디자인 적용하기 : 내부/외부 스타일링

해당 글에서는 React-native에서 디자인을 적용하는 다양한 방법에 대해서 확인해 봅니다.

 

1) 디자인 적용 비교

---

💡 React Native에서 스타일링을 위해 두 가지 방법을 제공합니다.

💡 내부 스타일링(Inline Styling)

- 컴포넌트에서 스타일을 지정하는 방법으로, 컴포넌트와 관련된 스타일을 정의하고 사용할 수 있습니다. 이 방법은 간단하고 직관적이지만, 반복적으로 사용되는 스타일을 관리하기 어려운 단점이 있습니다.


💡 외부 스타일링(External Styling)

- 스타일시트를 사용하여 스타일을 관리하는 방법으로, 스타일시트에서 스타일을 정의하고 컴포넌트에서 이를 참조하여 사용합니다. 이 방법은 스타일을 중앙 집중적으로 관리할 수 있어 유지보수성이 높으며, 재사용성이 높은 스타일을 만들 수 있습니다.

 

유형	Inline Styling	StyleSheet	styled-components	외부 디자인 시스템
분류	내부 스타일링	내부, 외부 스타일링	내부 스타일링	내부 스타일링
스타일 작성	태그 내 style 속성에 작성	CSS 파일에 작성	JavaScript 파일 내에서 작성	외부 라이브러리에서 가져옴
재사용성	재사용 불가	재사용 가능한 클래스	재사용 가능한 컴포넌트	재사용 가능한 컴포넌트
유지 보수성	태그 내 style 속성을 수정해야 함	CSS 파일을 수정해야 함	JavaScript 파일을 수정해야 함	외부 라이브러리를 업데이트해야 함
스타일 우선순위	캐스케이딩 규칙을 따름	캐스케이딩 규칙을 따름	캐스케이딩 규칙을 따름	외부 디자인 시스템 규칙을 따름
성능	CSS 파일에 비해 빠름	CSS 파일에 비해 느림	CSS-in-JS 라이브러리에 따라 다름	외부 라이브러리에 따라 다름

 
 
 

2) Inline Styling

---

💡 스타일을 컴포넌트의 props로 전달하여 인라인으로 스타일을 정의할 수 있습니다.

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

const MyComponent = () => {
  return (
    <View style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 24, fontWeight: 'bold', marginBottom: 20 }}>Hello, React Native!</Text>
      <Text>This is my first React Native app.</Text>
    </View>
  );
}

export default MyComponent;

 
 
 

3) StyleSheet

---

 💡 StyleSheet

- 컴포넌트 스타일을 작성하는 데 사용되는 객체입니다. StyleSheet.create() 메서드를 사용하여 스타일 객체를 생성할 수 있으며 이 객체는 컴포넌트의 style 속성에 적용됩니다.
- 여러 컴포넌트에서 동일한 스타일을 사용하는 경우에도 재사용할 수 있도록 도와줍니다.

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
});

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
      <Text>This is my first React Native app.</Text>
    </View>
  );
}

export default MyComponent;

StyleSheet · React Native

 
 
 
 
 

1. External StyleSheet로 사용방법

---

💡 공통으로 사용할 스타일 시트를 구성하여서 공통 스타일시트, 화면 스타일 시트를 배열 형태로 불러오면 함께 적용할 수 있습니다.

// 공통 스타일 시트(commonStyles), 스크린 내의 스타일 시트(styles)
style={[commonStyles.text, styles.text]}

import { StyleSheet } from 'react-native';

const commonStyles = StyleSheet.create({
  text: {
    fontSize: 16,
    color: '#333',
  },
  button: {
    backgroundColor: '#007aff',
    borderRadius: 4,
    padding: 12,
  },
});

export default commonStyles;

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import commonStyles from './commonStyles';

export default const MyComponent = () => {
  return (
    <View>
      <Text style={commonStyles.text}>This text uses the common text style.</Text>
      <TouchableOpacity style={commonStyles.button}>
        <Text style={[commonStyles.text, { color: '#fff' }]}>Press me!</Text>
      </TouchableOpacity>
    </View>
  );
}

 
 
 
 

4) styled-components(CSS-in-JS 방식)

---

 💡 styled-components

- Styled-Components는 React / React Native에서 스타일을 적용하는 데 사용되는 라이브러리 중 하나입니다.
- JSX/TSX 문법을 사용하여 CSS를 작성할 수 있으며, CSS-in-JS 방식으로 스타일을 적용합니다.
- 다양한 기능을 제공하며, CSS 변수, 조건부 스타일링, 테마 등을 지원합니다

styled-components

 

import React from 'react';
import styled from 'styled-components/native';

const Container = styled.View`
  flex: 1;
  background-color: #fff;
  align-items: center;
  justify-content: center;
`;

const Title = styled.Text`
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
`;

const MyComponent = () => {
  return (
    <Container>
      <Title>Hello, React Native!</Title>
      <Text>This is my first React Native app.</Text>
    </Container>
  );
}

export default MyComponent;

 

[ 더 알아보기 ]

💡 CSS-in-JS

- React와 같은 JavaScript 라이브러리나 프레임워크에서 CSS 스타일을 작성하고 적용할 수 있는 방법으로 스타일과 컴포넌트 로직을 한 곳에서 관리할 수 있으며, 서버 측 렌더링과 같은 일부 문제를 해결할 수 있습니다.
- 대표적인 CSS-in-JS 라이브러리로는 styled-components, emotion, CSS Modules 등이 있습니다.

💡 Styled-components로 사용된 것은 컴포넌트 내에서만 유효한 것인가?

- 네, styled-components는 정의된 컴포넌트 내에서만 유효하고 접근 가능합니다.

 
 
 
 

1. 사용방법

---

 

1.1. styled-components 라이브러리를 설치합니다.

npm install styled-components

 
 

1.2. 컴포넌트에서 styled-components를 import 합니다.

import styled from 'styled-components';

 
 

1.3. 스타일을 적용하려는 컴포넌트를 styled() 함수로 감싸고, 템플릿 리터럴을 사용하여 스타일을 작성합니다.

const Button = styled.button`
  background-color: blue;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
`;

 
 

1.4. 컴포넌트에서 styled-components로 만든 스타일을 사용합니다.

function MyComponent() {
  return (
    <div>
      <Button>Click me!</Button>
    </div>
  );
}

 
 
 

5) 외부 디자인 시스템

---

💡 React-native에서 별도의 구성 없이 외부 디자인 시스템을 이용하여서 앱의 디자인을 구성할 수 있습니다. 라이브러리 형태로 구성된 디자인을 그대로 사용하거나 속성을 수정하여서 사용합니다.

import React from 'react';
import { View, Text } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { Button } from 'react-native-elements';

const MyComponent = () => {
  return (
    <View style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }}>
      <MaterialCommunityIcons name="react" size={72} color="black" />
      <Text style={{ fontSize: 24, fontWeight: 'bold', marginBottom: 20 }}>Hello, React Native!</Text>
      <Button title="Get Started" />
    </View>
  );
}

export default MyComponent;

 
 

1. NativeBase

---

NativeBase: Universal Components for React & React Native

 
 
 

2. React Native Elements

---

React Native Elements

 
 
 

3. React Native Material

---

Hello from React Native Material | React Native Material

 
 
 
 
오늘도 감사합니다. 😀