패스잇
모바일 개발 · 기초

React Native에서 레이아웃을 구성할 때 Flexbox를 활용하는 방법과 주요 속성 (예: `flexDirection`, `justifyContent`, `alignItems`)에 대해 설명해주세요.

힌트 · Flexbox는 유연한 박스 모델을 제공하며, `flexDirection`은 주축, `justifyContent`는 주축 정렬, `alignItems`는 교차축 정렬을 담당합니다.

FlexboxflexDirectionjustifyContentalignItems반응형 레이아웃

모범답안

React Native에서 레이아웃을 구성할 때 Flexbox를 활용하는 것은 매우 중요합니다. Flexbox는 화면 크기나 해상도에 상관없이 유연하고 반응형 레이아웃을 만들 수 있도록 도와줍니다.

Flexbox의 핵심은 주축(main axis)과 교차축(cross axis)을 기준으로 아이템들을 정렬하는 것입니다. flexDirection 속성은 주축의 방향을 결정합니다. row (가로) 또는 column (세로)으로 설정할 수 있습니다.

justifyContent 속성은 주축을 따라 아이템들을 어떻게 정렬할지 정의합니다. 예를 들어 center는 가운데 정렬, space-between은 아이템 사이에 균등한 간격을 줍니다.

alignItems 속성은 교차축을 따라 아이템들을 정렬합니다. center는 교차축의 가운데, stretch는 컨테이너를 채우도록 늘립니다.

이 세 가지 속성을 조합하면 다양한 레이아웃을 쉽게 구현할 수 있습니다. 예를 들어, 화면 중앙에 텍스트를 배치하려면 flexDirection: column, justifyContent: center, alignItems: center를 사용할 수 있습니다.

읽었다면, 이제 직접 답해볼 차례예요

패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.

함께 보는 React Native 면접 질문

← React Native 면접 질문 전체 보기