JSX 문법 - 컨텐츠의 위치: flex

flex

--> 영역을 차지하는 속성

ex) flex는 영역의 가중치처럼 사용할 수 있다.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
return (

<View style={styles.container}>
  <View style={styles.containerOne}>

  </View>
  <View style={styles.containerTwo}>

  </View>
</View>

);
}

const styles = StyleSheet.create({
container: {
flex:1
},
containerOne: {
flex:1,
backgroundColor:"red"
},
containerTwo:{
flex:2,
backgroundColor:"yellow"
}
});

--> container가 단독 flex 1 로 전체화면을 의미하고 있고(가중치 1 중에 1)
--> container One, Two가 각각 가중치 1,2로 화면을 1:2로 분할해서 가져가고 있음(가중치 3중에 1,2)

flexDirection

---> flex로 분할하는 방향을 설정

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
return (

<View style={styles.container}>
  <View style={styles.containerOne}>

  </View>
  <View style={styles.containerTwo}>
    <View style={styles.innerOne}>

    </View>
    <View style={styles.innerTwo}>

    </View>

  </View>
</View>

);
}

const styles = StyleSheet.create({
container: {
flex:1
},
containerOne: {
flex:1,
backgroundColor:"red"
},
containerTwo:{
flex:2,
flexDirection:"row",
backgroundColor:"yellow"
},
innerOne: {
flex:1,
backgroundColor:"blue"
},
innerTwo: {
flex:4,
backgroundColor:"orange"
}
});

--> row, column(기본)으로 방향 설정

justifyContent

--> 설정된 flexDirection과 동일한 방향으로 내부의 컨텐츠들을 정렬

   --> column일 경우 '상하 정렬'
   --> row일 경우 '좌우 정렬'

위 코드에서 style의 innerTwo 부분에 justifyContent 설정

innerTwo: {
flex:4,
justifyContent:"center",
backgroundColor:"orange"

}

그 style을 사용하는 View에 Text 태그 설정

 <View style={styles.innerTwo}>
      <Text>!!컨텐츠!!</Text>
 </View>
    
    

--> 기본적으로 flexDirection이 column이기 때문에 '상하 정렬'로 center가 적용
(flexDirection을 row로 설정했다면 '좌우 정렬'로 center가 적용되었을 것)

--> justifyContent에서 center 설정을 하였기 때문에 해당 View 내부의 태그 Text가 그에 맞게 정렬되었음

alignItems

--> flexDirection으로 설정한 방향과 반대방향으로 정렬할 때 사용

--> flexDirection이 column(기본)일 경우 '상하 정렬'이므로 alignItems는 '좌우 정렬'

--> flexDirection이 row일 경우 '좌우 정렬'이므로 alignItems는 '상하 정렬'

예) 위 코드에서 Text를 View의 중앙에다가 놓고 싶을 경우

innerTwo: {
flex:4,
justifyContent:"center",
alignItems:"center",
backgroundColor:"orange"
}

--> flexDirection과 같은 방향의 정렬 justifyContent와, 반대방향의 정렬 alignItems를 각각 center로 해주는 것으로
상하 정렬 + 좌우 정렬