[React-Native] Style 적용하기

Style 넣기

React Native는 css가 없고, 대신에 JS에서 스타일을 작성한다. 핵심 컴포넌트의 속성 값을 이용해 (1) Inline Styles를 적용하거나, (2) StyleSheet 객체를 사용한다.

StyleSheet 객체를 이용하는 이유는 style 속성을 입력할 때 편리한 자동 완성 기능과 코드 검증 기능이 있어 개발 작업이 수월해지기 때문이다.

따라서

const styles={} 

가 아닌,

const styles = StyleSheet.create({})

형태로 작성하고, create 메소드의 파라미터 객체 속에 Style을 넣어주면 된다.

import { StyleSheet, View } from "react-native";
export default function App() {
  return <View style={styles.appContainer}></View>;
}
const styles = StyleSheet.create({
  appContainer: {
    height: 50,
    width: 50,
    backgroundColor: "aqua",
  },
});

위의 예시에서는 appContainer라는 Style을 만들어 View에 적용시켰다.

App 컴포넌트

App 컴포넌트가 유일한 컴포넌트.
앱에 렌더링 되는 루트 컴포넌트로, Expo가 자동으로 App 컴포넌트를 루트 컴포넌트로써 렌더링함. 따라서 모든 UI 요소와 컴포넌트는 App 컴포넌트 하위 컴포넌트여야한다.

FlexBox

React Native에서 View는 특정 스타일을 설정하지 않아도 기본값으로 flex box를 사용해 자식 요소를 구성하고, 자식 요소의 교차축에 대한 정렬도 기본으로 해준다. (웹의 div는 기본값으로 flex box를 사용하지 않으며, 교차축에 대한 정렬도 안해줌)

부모 View에서 자식 요소들을 정렬할 때

• 부모 View 스타일에 justifyContent 속성 추가, justifyContent는 주축을 따라 정렬한다.
• 부모 View 스타일에 alignItems 속성 추가, alignItems은 교차축을 따라 정렬한다.

자식이 차지할 공간을 조정할 때

• 주축에 대한 공간 : 자식의 스타일에 flex : <숫자>, flex 속성의 값으로 숫자를 넣어 공간을 차지하는 비율을 조절할 수 있다.
• 교차축에 대한 공간 : 부모 View의 스타일에 alignItems: 'stretch' 를 추가하면 교차축 방향에 대해 부모 View의 크기만큼 늘려준다.