3장) 컴포넌트 스타일링1

spring_sunshine 2022. 3. 11. 22:50

1. style 속성과 스타일 객체

스타일 속성은 컴포넌트의 style 속성에 설정되는 객체의 속성이다.
리액트와 리액트 네이티브 컴포넌트에서 style 속성에 설정되는 값은 HTML과 같은 마크업 언어와는 달리 문자열이 아니라 객체이다. 이 style 속성에 설정하는 객체를 스타일 객체라고 부른다.
다음 코드는 style 속성에 스타일 객체를 설정한 모습이다. 안쪽 { }은 객체를 의미하는 문법이고, 바깥쪽 { }은 JSX 구문에서 자바스크립트 코드를 설정할 때 쓰는 문법이다.

<SafeAreaView style={{}}>

style 속성의 이름 표기법

스타일 속성에는 요가 엔진이 지정한 이름만 사용할 수 있고, 'flex', 'color'처럼 소문자로 시작한다.
두 단어 이상으로 된 backgroundColor와 같은 속성 이름은 lower camel-case 표기법을 사용한다.
다음 코드는 flex와 backgroundColor 속성을 설정한 스타일 객체를 SafeAreaView 코어 컴포넌트의 style 속성에 설정한다.

<SafeAreaView style={{flex:1, backgroundColor: 'blue'}}>

style 속성에 배열 설정 구문

컴포넌트의 style 속성에는 배열을 설정할 수 있다.
style 속성 설정값이 배열이면 배열 안의 스타일 객체를 모두 결합하여 하나의 스타일 객체로 만들어 준다.

<컴포넌트_이름 style={[style 객체1, style 객체2, ...]} />

'뷰' 컴포넌트의 backgroundColor 스타일 속성

RN에서 제공하는 코어 컴포넌트 중 View, SafeAreaVIew 처럼 이름에 '뷰'가 들어간 뷰 컴포넌트는 backgroundColor 스타일 속성으로 자신의 바탕색을 설정할 수 있다.
반면, Text 컴포넌트는 자신의 바탕색을 설정할 수는 없지만 color 속성으로 글자 색상은 바꿀 수 있다.

export default function App() {
	return (
    	<SafeAreaView style={[{backgroundColor: 'bllue'}]}>
        	<Text style={[{color: 'white'}]}> Hello World! </Text>
        </SafeAreaview>
    )
}

컴포넌트 스타일을 설정한 코드이다. 위 코드에서는 스타일 객체를 style 속성에 설정했는데 이를 인라인 스타일이라고 한다.

StyleSheet API

RN은 다음과 같이 StyleSheet API를 제공한다.

import {StyleSheet} from 'react-native'

StyleSheet는 create 메서드를 제공하는데, 이 메서드를 사용하여 캐시된 스타일 객체를 생성할 수 있다.

const styles = StyleSheet.create({
	키_이름1: 스타일_객체1,
    키_이름2: 스타일_객체2,
    ...
})

StyleSheet.create의 목적이 자바스크립트 언어로 만든 스타일 객체를 네이티브 모듈 쪽으로 옮겨 주는 것이므로 여러 번 호출하여 스타일 객체 여러 개를 일일이 전달하는 것보다 한꺼번에 전달하는 것이 효율적이다.
StyleSheet.create는 StyleSheet.create(스타일_객체) 형태가 아니라 위처럼 키와 해당하는 스타일 객체 쌍을 여러 개 만드는 방식으로 사용한다.

▷ 인라인 스타일과 StyleSheet의 차이

컴포넌트는 필요에 따라 리엑트 네이티브에 의해 재렌더링된다.

StyleSheet.create로 생성된 스타일 객체는 UI 레드 쪽에 캐시되므로 앱 전체의 디스플레이 속도가 빨라지므로 내용이 변하지 않는 스타일(정적 스타일) 객체는 StyleSheet.create 방식으로 구현하는 것이 효과적이고, 컴포넌트 구현 로직에 따라 동적으로 변하는 스타일 객체는 인라인 스타일 방식으로 구현하는 것이 일반적이다.

2. View 컴포넌트와 CSS 박스 모델

View 컴포넌트는 여러 개의 리액트 네이티브 컴포넌트를 자식 요소로 가질 수 있고, 화면 UI의 레이아웃과 스타일링을 담당하는 중요한 역할을 한다.

Platfrom과 Dimensions API

리액트 네이티브 앱은 android/ ios 모두 실행되기 때문에 현재 앱이 어디에서 동작하는지를 파악하기 위해서 Platform API를 사용한다.

import {Platform} from 'react-native'
console.log(Platform.os) // 'android' 혹은 'ios'

또, 현재 실행된 폰의 크기를 알아낼 때는 Dimensions API를 사용한다.

import {Dimensions} from 'react-native'
const {width, height} = Dimensions.get('window')

Platform.select 메서드를 통해 운영체제 별로 다른 값을 설정할 수 있다.

값 = Platform.select({
	ios: 0, android: 20
})

뷰 컴포넌트의 backgroundColor 스타일 속성

View, ScrollView, SafeAreaView 처럼 이름에 'View'자가 들어간 뷰 컴포넌트는 backgroundColor 속성으로 자신의 바탕색을 설정할 수 있다. 이와는 달리 Text나 TextInput 컴포넌트는 자신의 바탕색은 설정할 수 없지만, 글자 색상은 color 속성으로 바꿀 수 있다.

View의 기본 width값과 height값

뷰 컴포넌트에 width와 height 스타일 속성값을 직접 명시하지 않았을 때, View의 width는 부모 컴포넌트의 width를 그대로 설정하고 height는 자식 요소의 height를 그대로 설정한다.

flex 스타일 속성

기본 width, height 스타일 속성 설정 대신 flex 스타일 속성에 1이란 값을 설정하면 height: '100%' 효과가 발생한다.
flex를 width, height와 함께 사용할 수 있는데, 이럴 때는 width와 height의 적용 우선순위가 flex보다 높다.

margin 스타일 속성

View 컴포넌트뿐 아니라 대부분의 코어 컴포넌트에는 margin 스타일 속성을 설정할 수 있다.
marjin 속성은 부모/자식 간 혹은 이웃한 형제 요소 간의 간격을 조정한다.
marginLeft, marginRight, marginTop, marginBottom 4가지가 있다.

padding 스타일 속성

padding 속성은 부모/자식 간의 관계에서 부모 컴포넌트 쪽에 적용하는 스타일 속성이다.
부모 컴포넌트 내부에 자식 컴포넌트를 배치할 때 자식 컴포넌트가 자신의 영역을 꽉 채우지 않고 간격을 주는 것이 시각적으로 좋아 보인다.
paddingTop, paddingBottom, paddingLeft, paddingRight 4가지가 있다.

border 스타일 속성

RN의 코어 컴포넌트는 대부부분 자신 영역의 경계를 설정하는 다음 스타일 속성을 사용할 수 있다.
borderWidth, borderColor, borderRadius, borderStyle

3. 자원과 아이콘 사용하기

모바일 앱 개발에서 자원은 앱에 포함하여 배포하는 이미지, 폰트, 아이콘 등의 파일을 의미한다.