ReactNative: 4/30 공부일지 작성 - flex

flex에 대한 설명

React Native에서는 컴포넌트의 크기를 절대적인 값으로 지정하는 것이 아니라, 상대적인 값으로 지정하여 반응형 레이아웃을 구성하는 것이 권장됩니다.

이를 위해서는 flex 속성을 이용할 수 있습니다.

 

Flex 속성은 해당 뷰의 크기를 지정할 수 있는데, 부모 뷰가 flex로 지정되어 있어야 합니다. 부모 뷰가 flex로 지정되면 자식 뷰들은 부모 뷰 내에서 유연하게 크기와 위치를 조정할 수 있습니다.

예를 들어, 부모 뷰가 다음과 같이 flex 속성을 가지고 있다면:

<View style={{flex: 1}}>

자식 뷰들은 다음과 같이 flex 속성을 이용하여 크기와 위치를 조정할 수 있습니다.

<View style={{flex: 1}}>
  <View style={{flex: 1}}>
    {/* 이 뷰는 부모 뷰의 1/2 크기를 가지고 있음 */}
  </View>
  <View style={{flex: 2}}>
    {/* 이 뷰는 부모 뷰의 1/3 크기를 가지고 있음 */}
  </View>
  <View style={{flex: 3}}>
    {/* 이 뷰는 부모 뷰의 1/6 크기를 가지고 있음 */}
  </View>
</View>

이렇게 flex 속성을 이용하여 컴포넌트들의 크기와 위치를 유연하게 조정하면, 다양한 크기의 화면에서도 적절한 레이아웃을 구성할 수 있습니다.

또한, 이를 통해 코드의 재사용성과 유지보수성을 높일 수 있습니다.