🎨 34. React Native 스타일링 완전 정리 — 스타일도 웹과 다르다!

---

React Native는 웹이 아니다.
즉, 우리가 흔히 쓰던 CSS나 className 기반의 스타일링 방식이 통하지 않는다.
대신 RN은 모든 스타일을 객체 형태로 구성하고,
HTML 태그 대신 <View>, <Text> 같은 네이티브 컴포넌트에 스타일을 적용한다.

이번 글에서는 React Native에서 사용할 수 있는 스타일링 방법 3가지와
각 방식의 특징, 실전 팁을 정리해봤다.

---

✅ 기본 스타일링: StyleSheet 객체 사용

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello React Native</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    color: '#333',
  },
});

📌 특징

• CSS가 아닌 JS 객체 형식
• StyleSheet.create()로 작성 시 자동 최적화됨
• 익숙해지면 오히려 더 가독성 좋음

---

🧩 주요 스타일 속성 정리

속성	설명
flex, flexDirection, justifyContent, alignItems	Flexbox 기반 레이아웃
padding, margin, borderWidth, borderRadius	박스 모델
fontSize, fontWeight, color	텍스트
backgroundColor, shadowColor	배경 및 그림자

🧠 React Native는 전체가 Flexbox 기반이다
→ display: flex는 기본값이라 생략됨!

---

✨ 인라인 스타일도 가능

<Text style={{ fontSize: 20, color: 'blue' }}>직접 스타일</Text>

• 빠르게 테스트할 땐 좋지만,
• 재사용성과 유지보수성에서는 StyleSheet 방식이 더 좋음

---

💅 styled-components/native 사용하기

npm install styled-components

import styled from 'styled-components/native';

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: #f9f9f9;
`;

const Title = styled.Text`
  font-size: 24px;
  color: #333;
`;

export default function App() {
  return (
    <Container>
      <Title>Hello styled-components!</Title>
    </Container>
  );
}

✅ 장점

• 기존 웹 React의 감성을 그대로 사용 가능
• 다크모드, 조건부 스타일링, theme 연동이 편함
• Emotion 대신 styled-components/native 사용

---

⚠️ 주의할 점

• CSS 문법 그대로는 안 됨
  → 단위 없음 (px, rem ❌), 모두 숫자 또는 문자열로 처리
• margin: auto 안 됨 (Flex로 대체)
• position: fixed ❌ (RN엔 없음 → 대신 absolute + 위치 계산)

---

📱 실무에서 자주 쓰는 패턴

const Button = styled.TouchableOpacity`
  background-color: ${(props) => (props.disabled ? '#ccc' : '#ff6600')};
  padding: 12px 24px;
  border-radius: 8px;
`;

<Button disabled={isSubmitting}>
  <Text>전송</Text>
</Button>

• 조건부 스타일링도 훨씬 직관적
• 테마 분리도 쉬워서 디자인 시스템 만들기 좋음

---

📝 내가 느낀 점

처음엔 CSS 왜 안 써짐?? 이랬는데,
Flexbox만 익히고 나니까 React Native는 오히려 스타일 구조가 더 깔끔하고 예측 가능하다고 느꼈다.
지금은 styled-components/native로 통일해서 다크모드도 ThemeProvider로 관리하고 있고,
앱 스타일링이 점점 웹처럼 자연스러워지고 있다는 걸 실감 중이다.

---

🎨 "스타일이 예뻐야 UX도 좋다. React Native의 스타일은 Flex와 객체로 완성된다."

---