[React Native] 조건부 스타일 (StyleSheet, 상속, 배열)

강의를 보면서 조건부 스타일링을 하는 것을 보는데, 분명 style 은 객체를 받도록 되어있는데 배열을 사용하는 것이 이상해서 알아보고 아는 만큼만 정리한다.

 

React Native -  style 속성

리액트 네이티브를 처음 접했을 때 style={fontSize: 14} 와 같이 입력하고 왜 안되지? 했던 기억이 있다.

style 속성은 객체를 받기 때문에 style={{fontSize: 14}} 와 같이 객체를 넣어줘야 한다.

 

그래서 style 객체를 따로 선언해서 넣어주고자 할때는 아래와 같이 사용한다.

 

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

const App = () => {
  return <View style={styles.container}>
    ...
  </View>;
};

 

스타일 상속

위에서 본 것 처럼 객체 대신 배열을 입력할 수가 있는데,

이 때는 상속의 개념으로 배열 내부에 객체를 입력하고,

뒤에 입력될 수록 높은 우선순위를 갖게 되어 앞에 속성을 덮어쓸 수 있게 된다.

 

처음에는 그냥 스프레드 방식으로 하면 되는 거 아닌가? 생각했었지만,

그렇게 한다면 동일한 속성이 중복으로 선언되어서 에러가 발생할 수 있겠다는 생각이 들었다.

 

조건부 스타일

배열 즉 상속의 기능을 활용해서 조건부 스타일을 만들게 된다.

뭔가 간단하게 될 것만 같지만 꼭 그렇지만은 않고, 깔끔하지도 않다.

styledcomponent 를 사용해서 파라미터를 받아서 조건부로 사용하는 것이 좀 더 깔끔한 것 같다.

 

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

// 추가
const conditionalStyles = {
  container: [styles.container, { backgroundColor: 'blue' as const }],
};

const App = () => {
  const containerStyle = <특정조건> ? styles : conditionalStyles;
  
  return <View style={containerStyle.container}>
    ...
  </View>;
};

이렇게 기존 스타일을 상속받으면서 조건부로 넣어줄 옵션을 객체로 추가해 주고,

조건에 따라 객체가 선택되도록 하면 된다.

물론 style 태그 내에서 삼항연산자를 사용하여도 된다.

 

이 때 conditionalStyles 는 StyleSheet 이 아닌 일반 객체이기 때문에 'blue' 와 같이 string 으로 값이 들어가는 경우 에러가 발생할 수 있고, as const 를 통해 Type Assertion (타입 단언) 을 해줘야 한다는 것 같다.