[React Native] Style props로 사용하기

react native에서는 javascript를 사용하여 애플리케이션의 스타일을 지정합니다. 모든 핵심 컴포넌트는 style이라는 prop을 받습니다. 스타일 이름과 값은 일반적으로 웹에서 css가 작동하는 방식과 유사하지만, 이름은 카멜 케이스로 작성됩니다. 예를 들어, background-color 대신에 backgroundColor와 같이 작성됩니다.

style prop은 일반적으로 javascript 객체일 수 있습니다. 이것이 보통 예제 코드에서 사용하는 방식입니다. 또한 스타일의 배열을 전달할 수도 있습니다. 배열에서 마지막 스타일이 우선적으로 적용되므로, 이를 사용하여 스타일을 상속할 수 있습니다.

컴포넌트가 복잡해짐에 따라 여러 스타일을 한 곳에서 정의하는 것이 일반적으로 더 깔끔합니다. 이를 위해 StyleSheet.create를 사용하여 여러 스타일을 한 곳에 정의할 수 있습니다.

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

type HeaderProps = {
    style: styleProps
}

export type styleProps = {
    backgroundColor: ColorValue
}

const Header: React.FC<HeaderProps> = ({style}) => {
    return (
        <View style={[styles.container, style]}>
            <Text>Header</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'blue'
    }
});

export default Header;

이렇게 기본적으로 backroundColor가 blue인 헤더 컴포넌트가 탄생합니다. 

이제 Header 컴포넌트를 호출하는 부분에서 backgroundColor를 red로 호출해보겠습니다.

이런 패턴처럼 컴포넌트가 style prop을 받도록 만들고, 이 prop을 사용하여 하위 컴포넌트에 스타일을 적용하는 것입니다. 이를 사용하여 스타일이 CSS에서와 같이 캐스케이딩될 수 있습니다.

많은 방법으로 커스터마이즈할 수 있습니다.