React Native에서 styling은 어떻게 동작하나요?

Question

Accepted Answer

React Native 스타일링은 (CSS 파일이 아닌) **JavaScript 객체**를 사용하며, `style` prop을 통해 적용하고 보통 `StyleSheet`로 정리합니다. 레이아웃은 **Flexbox 기반** 시스템을 사용합니다. 개념은 CSS와 유사하지만 JavaScript 문법과 몇 가지 차이가 있습니다. ## JavaScript 객체로 스타일링 ```jsx import { StyleSheet, View, Text } from 'react-native'; function Card() { return ( Hello ); } // StyleSheet.create — 스타일을 JS 객체로 정의 (camelCase 속성) const styles = StyleSheet.create({ card: { padding: 16, backgroundColor: '#fff', // camelCase (background-color가 아님) borderRadius: 8, }, title: { fontSize: 18, fontWeight: 'bold', color: '#333', }, }); ``` 스타일은 **camelCase** 속성명(`background-color`가 아닌 `backgroundColor`)을 가진 **JavaScript 객체**이며, `StyleSheet.create`로 정리합니다. 인라인 객체나 스타일 배열을 전달할 수도 있습니다. ## Flexbox 레이아웃 (기본값) ```jsx // React Native는 레이아웃에 FLEXBOX를 사용함 (CSS flexbox와 유사하나, // flexDirection 기본값이 'row'가 아닌 'column') ``` ## 웹 CSS와의 차이점 ```text ✓ JS 객체, camelCase 속성; CSS 파일/클래스 없음; 값은 보통 단위 없는 숫자 ✓ 기본적으로 FLEXBOX (flexDirection 기본값이 웹의 'row'와 달리 'column') ✓ CSS 속성의 일부만 지원 (웹 CSS의 모든 것이 아님); 일부 RN 고유 동작 ✓ CSS 같은 cascade/상속 없음 (스타일은 컴포넌트별); 스타일 배열로 결합 ``` ## 왜 중요한가 React Native에서 스타일링을 이해하는 것은 기본인데, **스타일링은 어떤 UI든 만드는 데 필수**이고 React Native의 방식이 웹 CSS와 다르기 때문에 반드시 알아야 할 실용 지식입니다. React Native는 CSS 파일이 아니라 (`style` prop을 통해, `StyleSheet`로 정리되는) **JavaScript 객체**로 UI를 스타일링하며, 이를 이해하는 것(`backgroundColor` 같은 camelCase 속성명, 스타일을 JS 객체로 정의, 배열로 스타일 결합)이 어떤 React Native 컴포넌트든 스타일링하는 데 필요합니다. **Flexbox 기반 레이아웃 시스템**을 이해하는 것은 특히 중요합니다. React Native는 레이아웃에 (flexDirection, justifyContent, alignItems가 있는 CSS Flexbox와 유사한) Flexbox를 사용하지만, **flexDirection 기본값이 'column'**(웹처럼 'row'가 아님)이라는 핵심적 차이가 있어 흔한 혼란의 지점입니다. Flexbox는 주된 레이아웃 메커니즘이므로 UI 배치를 위해 이해하는 것이 필수입니다. **웹 CSS와의 차이점**을 이해하는 것은 특히 웹 개발자에게 중요합니다. CSS 파일/클래스 대신 camelCase JS 객체, 단위 없는 숫자 값, CSS 속성의 일부(웹의 모든 것이 아님), column 기본값 flexbox, CSS 같은 cascade/상속 없음(스타일은 컴포넌트별) — 이러한 차이들은 흔한 걸림돌이며 이해하면 명확해집니다. 개념은 CSS와 유사하지만(웹 개발자에게 접근하기 쉬움) 문법과 일부 동작이 다르므로 React Native의 구체적 방식을 이해하는 것이 필요합니다. 스타일링은 어떤 UI든 만드는 데 필수이고 React Native의 JS 객체, Flexbox 기반 방식(웹 CSS와의 차이 포함)이 그 방법이므로, React Native에서 스타일링을 이해하는 것은 어떤 React Native 인터페이스든 만드는 데 필요한 필수 기초 실용 지식입니다. 또한 웹 개발자가 CSS와의 차이를 이해하는 데 중요하며, React Native UI 개발에서 끊임없이 사용되는 핵심 기술입니다.