왜 StyleProp<ViewStyle> 를 쓰는가? 그냥 ViewStyle 이 아니라?

Avatar 라는 재사용 가능 컴포넌트를 만든다고 할 경우 속성값으로 ImageStyle 이나 ViewStyle 의 타입을 가진 속성값을 받을 것이다.

이때 타입을 지정해줄 때 이렇게 TextStyle, ViewStyle, ImageStyle 로 해도 되지만 이렇게 할 경우 style={[styles.x, styles.y]} 와 같이 배열로 입력할 경우 오류가 난다. 그래서 style: ViewStyle | ViewStyle[] 과 같이 해주면 이 오류는 사라진다. 하지만 또 다시 style={[style.x, boldText ? style.bold : undefined]} 와 같이 조건에 따라 달라지는 속성값을 넣어줄 경우 또 오류가 난다.

interface Props {
  textStyle?: TextStyle;
  viewStyle?: ViewStyle;
}

이러한 경우에 대해서 모두 처리해놓은 원래 리액트 네이티브의 타입 정의 파일을 보면 다음과 같이 StyleProp 에 제너릭 형태로 해당 타입을 넣어준 것을 사용하고 있다. 그냥 StyleSheet.create<Styles>({}) 할 때 Styles 인터페이스 내에서는 그냥 ViewStyle, TextStyle 로 사용하여도 된다. 저런 배열이나 조건에 따른 여러가지 타입이 들어가는 유동적인 상황이 없기 때문이다. 하지만 일반적으로 리액트 네이티브에서 코딩할 때 컴포넌트의 style 에 배열이나 조건에 따른 다른 값을 넣는 식으로 하는 것을 그대로 내가 만든 재사용 가능한 컴포넌트에도 사용할 수 있도록 하려면 StyleProp<ViewStyle> 과 같이 타입을 지정해야 한다. 참고로 모든 리액트 핵심 컴포넌트들은 style 속성값을 가지고 있다. 핵심 컴포넌트들의 종류에 따라 조금씩 다른 타입의 style 타입이 존재한다. ViewStyle, ImageStyle, TextStyle 등...

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

 

참고: https://spin.atomicobject.com/2018/06/02/custom-components-react-native/