ReactNative) 스타일시트를 props로 활용하는 방법 (StyleProp<T>)

스타일 객체 props 활용하는 방법

React Native에서는 스타일을 정의하고 이를 컴포넌트에 전달하는 방법이 여러 가지 있다.

스타일을 정의할 때, StyleSheet.create를 사용하여 스타일 객체를 생성하는 방법이 대표적인데,

이를 단순히 선언한 페이지에서만 쓰는게 아니라, prop으로 하위 컴포넌트에 내려줄수도 있다.

 

이때 Props의 타입으로서 StyleProp<T>를 많이 쓰게 된다.

StyleProps<ViewStyle>, StyleProps<ImageStyle>, StyleProps<TextStyle> 등등.

 

style들을 여러 개 담아 배열로 prop화할 수 있는데 이땐 StyleProps<ViewProps[]> 이런 식으로도 활용 가능하다..

 

사용 예시:

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

interface Props {
  containerStyle?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
}

const MyComponent: React.FC<Props> = ({ containerStyle, textStyle }) => {
  return (
    <View style={[styles.container, containerStyle]}>
      <Text style={[styles.text, textStyle]}>Hello, World!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'blue',
    padding: 10,
  },
  text: {
    color: 'white',
    fontSize: 16,
  },
});

export default MyComponent;

 

 

사실 평범한 객체도 스타일 객체로 사용 가능하다.

간간히 써본 기억이 있겠지만, 객체를 props로 전달해서 jsx에 스프레드하여 주입하는 것을 써본 기억이 있을 것이다.

주로 {...props} 식으로 쓴다. 이와 비슷하게 styleSheet 속성에도 그냥 객체에 담아서 넣을 수 있다.

 

사용 예시:

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

const containerStyle = {
  backgroundColor: 'blue',
  padding: 10,
};

const textStyle = {
  color: 'white',
  fontSize: 20,
};

const App = () => {
  return (
    <View style={containerStyle}>
      <Text style={textStyle}>Hello, World!</Text>
    </View>
  );
};

export default App;