-
[React Native] 조건부 스타일 (StyleSheet, 상속, 배열)2/React Native 2023. 9. 13. 16:03
강의를 보면서 조건부 스타일링을 하는 것을 보는데, 분명 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 (타입 단언) 을 해줘야 한다는 것 같다.
'2 > React Native' 카테고리의 다른 글
[React Native] React Navigation 설치 및 사용법 (cli, typescript) (0) 2023.09.27 [React Native] styled-components 설치 (cli, typescript) (0) 2023.09.27 [React Native] eslint 와 prettier 설정 (+타입스크립트) (0) 2023.09.13