React Native에서 레이아웃을 구성할 때 Flexbox를 활용하는 방법과 주요 속성 (예: `flexDirection`, `justifyContent`, `alignItems`)에 대해 설명해주세요.
힌트 · Flexbox는 유연한 박스 모델을 제공하며, `flexDirection`은 주축, `justifyContent`는 주축 정렬, `alignItems`는 교차축 정렬을 담당합니다.
모범답안
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가 React (Web)와 가장 큰 차이점은 무엇이며, 이로 인해 어떤 개발 방식의 변화가 필요한가요?
- React Native에서 가장 기본적인 컴포넌트인 `View`와 `Text`의 역할은 무엇이며, 각각 어떤 용도로 사용되는지 설명해주세요.
- React Native에서 UI 컴포넌트에 스타일을 적용하는 일반적인 방법 중 `StyleSheet.create`를 사용하는 이유는 무엇인가요?
- React Native 컴포넌트에서 `state`와 `props`는 각각 어떤 역할을 하며, 이 둘의 주요 차이점은 무엇인가요?
- React Native 함수형 컴포넌트에서 `useEffect` Hook은 주로 어떤 목적으로 사용되며, 의존성 배열의 역할에 대해 설명해주세요.
- React Native 컴포넌트에서 `useEffect` 훅의 의존성 배열(dependency array)과 클린업(cleanup) 함수를 사용하여 발생할 수 있는 일반적인 메모리 누수나 불필요한 재실행 문제를 어떻게 방지할 수 있나요?