리액트 네이티브] 7. 스타일 적용

리액트 네이티브는 JSX로 개발을 한다. 컴포넌트에서 스타일을 적용하는 방법은 크게 두 가지이다. 인라인 방식과 스타일시트에 정의된 스타일을 사용하는 방법이 있다.

 

1. 인라인 방식

 

- ../App.js

import App from './src/App';

export default App;

 

-../src/App.js

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

const App = () => {
    return (
        <View
            style = {{
                flex : 1,
                backgroundColor : '#fff',
                alignItems : 'center',
                justifyContent : 'center',
            }}
        >
            <Text
                style = {{
                    padding : 10,
                    fontSize : 26,
                    color : 'black'
                }}
            >
                Inline style - black
            </Text>
            <Text
                style = {{
                    padding : 10,
                    fontSize : 24,
                    color : 'red'
                }}
            >
                Inline style - red
            </Text>
        </View>
    );
}

export default App;

 

결과를 보자.

지정된 스타일대로 길이가 길어진 것이 보인다.

그러나 이렇게 개발을 하면 코드가 많아지면 코드 분석이 힘들어지고, 동일한 디자인일 경우 동일한 코드를 넣어야 하며 어떤 스타일이 적용되는지 점점 판단이 어려워진다는 단점이 있다. 

 

 

2. 스타일시트

다음은 스타일시트를 적용하는 방식이다.

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

const App = () => {
    return (
        <View style = {style.container}>
            <Text style = {style.text}>
                Contaier style - black
            </Text>
            <Text style = {style.error}>
                Contaier style - red
            </Text>
        </View>
    );
};

const style = StyleSheet.create({
    container : {
        flex : 1,
        backgroundColor : '#fff',
        alignItems : 'center',
        justifyContent : 'center',
    },
    text : {
        padding : 10,
        fontSize : 26,
        color : 'black'
    },
    error : {
        padding : 10,
        fontSize : 24,
        color : 'red'
    },

});

export default App;

 

이렇게 하면, error의 컬러를 하나만 바꾸면 되지만 인라인 스타일링은 error컬러를 일일히 바꿔야한다는 단점이 있다. 또한 가독성과 관리가 훨씬 편해진다는 장점이 있다.

 

또한 스타일을 중첩해서 사용할 수도 있다. 스타일 시트를 배열 내에 넣으면 된다.

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

const App = () => {
    return (
        <View style = {style.container}>
            <Text style = {style.text}>
                overlap containr style - black
            </Text>
            <Text style = {[style.text, style.error]}>
                overlap contaier style - red
            </Text>
        </View>
    );
};

const style = StyleSheet.create({
    container : {
        flex : 1,
        backgroundColor : '#fff',
        alignItems : 'center',
        justifyContent : 'center',
    },
    text : {
        padding : 10,
        fontSize : 26,
        color : 'black'
    },
    error : {
        fontSize : 24,
        color : 'red'
    },

});

export default App;

  

error쪽에 두 개의 스타일 시트가 적용된 것이 보인다. 일단 결과를 보자.

 

보면 중첩되면서도 값이 다른 스타일은 뒤에 선언된 스타일시트를 따라가는 것이 보인다. 따라서, 중복 스타일 시트를 적용할 것이라면 뒤 시트의 값을 유의하면서 적용한다.

 

물론, 인라인 시트를 동시 적용하는 것도 가능하다.

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

const App = () => {
    return (
        <View style = {style.container}>
            <Text style = {[style.text, {color : 'green'}]}>
                overlap containr style - black
            </Text>
            <Text style = {[style.text, style.error]}>
                overlap contaier style - red
            </Text>
        </View>
    );
};

const style = StyleSheet.create({
    container : {
        flex : 1,
        backgroundColor : '#fff',
        alignItems : 'center',
        justifyContent : 'center',
    },
    text : {
        padding : 10,
        fontSize : 26,
        color : 'black'
    },
    error : {
        fontSize : 24,
        color : 'red'
    },

});

export default App;

color : green 부분만 정상 적용된 것이 보인다.

 

 

3. 스타일 시트 외부로 빼기

이 시트를 외부로 뺄수도 있는데,

 

-../src/styles.js

import { StyleSheet } from "react-native";

export const viewStyle = StyleSheet.create({
    container : {
        flex : 1,
        backgroundColor : '#fff',
        alignItems : 'center',
        justifyContent : 'center',
    },
});

export const textStyle = StyleSheet.create({
    text : {
        padding : 10,
        fontSize : 26,
        color : 'black'
    },
    error : {
        fontSize : 24,
        color : 'red'
    },
});

 

-../src/App.js

import React from "react";
import { View, Text} from "react-native";
import { viewStyle, textStyle } from "./styles";

const App = () => {
    return (
        <View style = {viewStyle.container}>
            <Text style = {textStyle.text}>
                text containr style - black
            </Text>
            <Text style = {[textStyle.text, textStyle.error]}>
                text contaier style - red
            </Text>
        </View>
    );
};

export default App;

이렇게 입력하면 외부의 스타일시트에 접근할 수 있다.