2일차 레이아웃 지정하기

1일차에 배운 걸 완벽하게 이해했다는 걸로 나에게 2일차 화이팅을 외쳤다.

오늘은 Flex layout을 이용해 레이아웃을 지정하는 걸 배워보기로 했다.

그러고 보니 예전에 Flex Layout을 이용해 개구리를 연잎에 앉히는 게임(?)이 있었다. 

그때 그 게임을 호기심 삼아 해봐서 다행히 Flex Layout이 뭔지는 알고 있었다.

(게임 중간까지하다가 어려워져서 그냥 말았던 기억이...)

나름 자신있게 책상에 앉았는데,

종은이 스타일 Component의 Variable에 있는데 어쩌구 저쩌구 하는게 아닌가?

설명을 자연스럽게 왼쪽 귀로 들어와 바로 오른쪽 귀로 빠져나가 버렸고, 무의식 중에 고개를 끄덕이고 있었다.

순간 정신을 차리고 솔직하게 말했다.

'나 하나도 이해가 안돼'

종은이 설명해주던 걸 다시 한번 더 쉽게 설명해줬다.

'이제 무슨말인지 알것 같긴 한데, 왜 그렇게 되야하는지는 이해가 안돼'

종은은 다시 심호흡을 하더니 혼잣말을 중얼거리기 시작했다. 

"아, 이것까지 가르쳐야 하는구나, 자 그럼 여기까지 배워봅시다, 아...자바스크립트 기초 개념부터 시작해야 하나..아니야! 할수 있어!"

크게 당황하기 시작한 모습이다.

나는 경우의 수, 이진법, 십진법, 4비트와 8비트, 자바스크립트의 var. const. let까지 훓은 다음에야 다시 처음으로 돌아올 수 있었다.

이해한걸 간단히 정리하면 React Native에서는 화면에 뭔가를 그릴때 컴포넌트 라는 요소들을 배치해서 그리는 방법을 쓸 수 있는데, 이때

1. 어떤 컴포넌트를 쓸지 선택하고 

2. 속성에 변수를 지정

하면 된다는 것 이었다.(결국은 1일차에 배운것의 반복이었음)

그리고 나는 이 동작원리를 이해하기 위해서 'View'라는 컴포넌트를 선택해 네모박스를 그리는 걸 연습하게 됐다. 

우선 하나의 네모 박스를 그려보고, 두개의 네모 박스를 그려보고,

이 네모 박스들을 Flex Layout을 이용해 왼쪽으로 붙였다가, 오른쪽으로 붙였다가, 가운데로 붙였다가,

또 균등하게 배치했다가 가장 멀리 떨어지게 배치하는 레이아웃을 지정하는 연습을 했다.

요건 다시 한번 개구리를 연잎에 앉히는 게임을 하면서 익혀보면 될 듯 하다.