react native 2주차

앱 화면을 구성할 때 사실 flex가 가장 중요하다고 봐도 과언이 아닙니다. 영역의 레이아웃을 결정하기 때문입니다! 당부드리고 싶은 말씀은, 지금 이해가 안된다고 해서 너무 자책할 필요없습니다. 위에서 배운 스타일 코드들과 달리, flex는 자주 쓰고, 눈으로 확인하는 연습이 좀 수반되야 손에 익는 문법이기 때문입니다. 따라서 지금은 이해되는대로만 받아들이고, 앞으로 우리가 앱을 만들면서 차차 익숙해질 예정이니 너무 걱정하지 않으셔도 됩니다! 일단 flex 부터 flex와 같이 사용하는 중요 속성들까지 하나하나 살펴보겠습니다

 

flex

영역을 차지하는 속성입니다. 상대적인 개념이 좀 들어가는데요! 다음 화면을 보겠습니다.

다시말해 flex는 상대적입니다. 가장 최상위의 container 스타일을 가져가는 View 엘리먼트는 디바이스 전체 화면의 영역을 가져갑니다. 안 쪽의 containerOne 스타일이 부여된 View 엘리먼트는 전체를 3등분한 뒤 1/3을 가져가고 containerTwo는 2/3를 가져갑니다. 즉, 같은 레벨의 엘리먼트들의 flex 합을 각자의 flex 속성값 대로 가져갑니다. 또 하나 예제를 살펴보겠습니다.

 

innerOne,Two를 모두 감싸고 있는 containerTwo의 flexDirection 속성값을 변경하면서, innerTwo의 justifyContent 속성값을 이리저리 변경해보세요! 상위 엘리먼트 영역의 flexDirection을 따라서 컨텐츠 위치도 변경됨을 알 수 있습니다.

 

 

Align Items는 Flex Direction과 수직한 방향(반대 방향이라고 생각하면 편합니다)으로 정렬하는 속성입니다. flexDirection: 'column'에서 alignItems는 좌우 정렬, flexDirection: 'row'에서 alignItems는 상하 정렬을 뜻합니다 flex-start, center, flex-end, stretch 속성을 가집니다. 아래 설명 이미지를 보고 한번 적용해볼까요?