React Native 스타일링 기초: StyleSheet와 Flexbox로 레이아웃 잡기

기본 컴포넌트(View, Text, Image)를 써서
화면에 뭔가 띄우는 데까지는 금방 온다.

그다음부터 막히는 지점은 거의 항상 같다.

• 왜 가운데 정렬이 안 되지?
• 웹처럼 margin: auto가 안 먹히네?
• 가로 정렬은 했는데 세로가 이상하다

이건 React Native가
웹이 아니라 Flexbox 기반 레이아웃이기 때문이다.

이 글에서는
React Native 스타일링의 핵심인
StyleSheet와 Flexbox 개념을 입문자 기준으로 정리한다.

---

이 글이 필요한 사람

• React Native에서 레이아웃이 자꾸 어긋나는 경우
• Flexbox 개념이 아직 헷갈리는 경우
• 웹 CSS 감각으로 접근했다가 막힌 경우

---

React Native 스타일링 기본 개념

React Native에서는
CSS 파일을 따로 쓰지 않는다.

대신 JavaScript 안에서
스타일 객체를 정의해서 사용한다.

<View style={{ backgroundColor: 'red' }} />

이 방식이 기본이지만,
실무에서는 보통 StyleSheet를 사용한다.

---

StyleSheet 사용 이유

import { StyleSheet, View } from 'react-native';

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

StyleSheet의 장점

• 스타일 관리가 깔끔해진다
• 재사용이 쉽다
• 코드 가독성이 좋아진다

인라인 스타일은 테스트용,
실제 앱에서는 StyleSheet가 기본이다.

---

가장 기본적인 레이아웃 예제

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>상단</Text>
      <Text>하단</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

여기서 가장 중요한 속성은 flex: 1이다.

• 부모 영역을 화면 전체로 확장
• 레이아웃 계산의 기준점

---

React Native에서 Flexbox는 기본값이다

React Native의 모든 View는
기본적으로 Flexbox 레이아웃을 따른다.

다만 웹과 다른 점이 하나 있다.

⚠️ 기본 방향이 column이다

• 웹: flex-direction: row
• React Native: flex-direction: column

이 차이 때문에
처음에 레이아웃이 어색해 보이는 경우가 많다.

---

자주 쓰는 Flexbox 속성 정리

flexDirection

flexDirection: 'row' // 가로
flexDirection: 'column' // 세로 (기본값)

---

justifyContent (주축 정렬)

justifyContent: 'center'
justifyContent: 'space-between'

• column일 때 → 세로 정렬
• row일 때 → 가로 정렬

---

alignItems (교차축 정렬)

alignItems: 'center'
alignItems: 'flex-start'

• column일 때 → 가로 정렬
• row일 때 → 세로 정렬

justifyContent / alignItems는
항상 flexDirection과 같이 생각해야 한다.

[이미지: Flexbox 축 개념 설명]

---

가운데 정렬, 이렇게 하면 된다

가장 많이 쓰는 패턴이다.

container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
}

이 조합은
화면 정중앙 정렬 공식처럼 외워도 된다.

---

margin과 padding 사용 시 주의점

box: {
  margin: 16,
  padding: 12,
}

• 단위는 px이 아니다
• 숫자 자체가 논리적 단위
• 플랫폼별로 약간의 차이는 있지만 대부분 신경 쓰지 않아도 된다

---

실무에서 자주 겪는 헷갈림 포인트

실제로 써보면
다들 여기서 한 번씩 막힌다.

• 부모에 flex: 1을 안 줘서 레이아웃이 안 잡힘
• justify / align 축을 반대로 이해함
• 웹처럼 생각하고 position으로 해결하려다 꼬임

레이아웃이 안 맞을 때는
Flexbox 축부터 다시 보는 게 제일 빠르다.

---

정리

• React Native 스타일은 JS 객체로 작성한다
• StyleSheet는 사실상 필수다
• Flexbox가 레이아웃의 중심이다
• 기본 방향은 column이다
• 중앙 정렬 공식은 자주 쓰인다

다음 글에서는
ScrollView와 FlatList를 사용해서
스크롤이 있는 화면을 만들어보려고 한다.