# React Native 스타일링 및 레이아웃 (React Native)

> Flexbox, 절대 위치 지정, 반응형 디자인, safe area, 플랫폼별 스타일

- 18 면접 질문
- Junior
- [면접 질문: React Native](https://sharpskill.dev/ko/technologies/react-native/interview-questions.md)

## 1. React Native에서 flexDirection의 기본값은 무엇인가요?

**답변**

React Native에서는 'row'가 기본값인 웹과 달리 flexDirection의 기본값이 'column'입니다. 즉, 자식 요소가 기본적으로 위에서 아래로 수직 배치됩니다. 이러한 차이는 수직 레이아웃이 더 흔한 모바일 인터페이스의 일반적인 관례를 반영합니다.

## 2. React Native에서 재사용 가능한 스타일을 만들려면 어떻게 해야 하나요?

**답변**

StyleSheet.create()는 React Native에서 스타일을 만드는 권장 방법입니다. 여러 컴포넌트에서 재사용할 수 있는 스타일 객체를 정의할 수 있습니다. 이 방식은 시작 시 스타일을 한 번만 검증하고 렌더링할 때마다 객체를 다시 만드는 대신 ID로 참조하여 성능을 최적화합니다.

## 3. 요소를 컨테이너 내에서 가로와 세로 모두 가운데 정렬하려면 어떤 속성을 사용하나요?

**답변**

요소를 양쪽 축으로 가운데 정렬하려면 justifyContent: 'center'(주축)와 alignItems: 'center'(교차축)를 결합해야 합니다. 기본 flexDirection('column')에서는 justifyContent가 세로로, alignItems가 가로로 가운데 정렬합니다. 이 두 속성이 함께 작동하여 완벽한 가운데 정렬을 구현합니다.

## 15개 추가 질문 이용 가능

- React Native에서 치수에 기본적으로 사용되는 측정 단위는 무엇인가요?
- 부모를 기준으로 요소를 절대 위치로 배치할 수 있는 속성은 무엇인가요?

무료로 가입하기: https://sharpskill.dev/ko/login

## 기타 React Native 면접 주제

- [JavaScript 핵심](https://sharpskill.dev/ko/technologies/react-native/interview-questions/javascript-essentials.md): 25개 질문, Junior
- [React 기초](https://sharpskill.dev/ko/technologies/react-native/interview-questions/react-fundamentals.md): 20개 질문, Junior
- [React Native 기초](https://sharpskill.dev/ko/technologies/react-native/interview-questions/react-native-basics.md): 22개 질문, Junior
- [React Hooks](https://sharpskill.dev/ko/technologies/react-native/interview-questions/react-hooks.md): 20개 질문, Junior
- [React 및 React Native를 위한 TypeScript](https://sharpskill.dev/ko/technologies/react-native/interview-questions/typescript-for-react-native.md): 22개 질문, Junior
- [React Native 컴포넌트 및 API](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-components-api.md): 20개 질문, Junior
- [React Native 내비게이션](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-navigation.md): 22개 질문, Mid-Level
- [React Native 상태 관리](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-state-management.md): 24개 질문, Mid-Level
- [React Native 네트워킹 및 API](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-networking-api.md): 20개 질문, Mid-Level
- [데이터 영속성](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-data-persistence.md): 20개 질문, Mid-Level
- [폼과 유효성 검사](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-forms-validation.md): 18개 질문, Mid-Level
- [React Native 애니메이션](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-animations.md): 22개 질문, Mid-Level
- [Native Modules & Bridge](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-native-modules.md): 20개 질문, Mid-Level
- [플랫폼별 코드](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-platform-specific-code.md): 18개 질문, Mid-Level
- [권한 및 디바이스 API](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-permissions-apis.md): 20개 질문, Mid-Level
- [Push Notifications](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-push-notifications.md): 18개 질문, Mid-Level
- [React Native 테스팅](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-testing.md): 20개 질문, Mid-Level
- [React Native 디버깅](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-debugging.md): 18개 질문, Mid-Level
- [Build & Deployment](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-build-deployment.md): 20개 질문, Mid-Level
- [Expo vs React Native Bare](https://sharpskill.dev/ko/technologies/react-native/interview-questions/expo-vs-bare-rn.md): 18개 질문, Mid-Level
- [성능 최적화](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-performance-optimization.md): 24개 질문, Senior
- [메모리 관리](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-memory-management.md): 20개 질문, Senior
- [Architecture Patterns](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-architecture-patterns.md): 22개 질문, Senior
- [React Native New Architecture](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-new-architecture.md): 24개 질문, Senior
- [보안 모범 사례](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-security-best-practices.md): 20개 질문, Senior
- [Offline-First Architecture](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-offline-first.md): 20개 질문, Senior
- [React Native CI/CD](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-ci-cd.md): 20개 질문, Senior
- [Monorepo와 코드 공유](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-monorepo-architecture.md): 18개 질문, Senior
- [고급 주제](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-advanced-topics.md): 22개 질문, Senior
- [앱 라이프사이클 및 백그라운드 실행](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-app-lifecycle-background.md): 20개 질문, Mid-Level
- [인증 및 세션 관리](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-auth-session-management.md): 22개 질문, Mid-Level
- [Monitoring & Crash Reporting](https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-monitoring-crash-reporting.md): 20개 질문, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ko/technologies/react-native/interview-questions/rn-styling-layout