React-Native [2. 개발 진행 순서]

Element로 구성하여 먼저 틀을 만든다

가장 밑그림이 되는 View(혹은 ScrollView)를 container로 놓고, 그 위에 차근차근 겹겹이 element를 선언한다.

Style을 세분화한다

가장 바깥쪽 container

가장 바깥을 차지하는 container는 borderWidth를 1로 선언하고 위치부터 확인해보면 훨씬 편하다.
가장 밑바탕이므로 margin, padding정도만 선언해주는것이 좋다.
추가로 그 안의 element들이 가로/세로 정렬이 어떻게 되는지 선언을 하면서 마무리한다.

flexDirection: 'row' 		// 가로
flexDirection: 'column'		// 세로. 선언 안해줘도 default값으로 되어있다.

안쪽 Container

역시 margin, padding을 선언해주고, 위치가 헷갈린다면 borderWidth를 주어 확인해본다.

Element들

width, height, borderRadius, color 등을 매기면서 각 요소들을 확인해본다.
참고로 Image는 크기가 너무 크면 보이지가 않는것을 확인했다.