리액트 네이티브 UI 디자인을 위해서는 Flexbox에 대한 이해가 필수적으로 필요하다고 생각해서 리액트 네이티브 공식 홈페이지에 있는 예제를 통해서 공부해보았다.
예제들을 설명하기 앞서 맨 처음 코드에 대해 설명하겠다. React Native와 TypeScript는 글 게시 기준으로 시작한 지 하루밖에 되지 않아서 설명에 있어 부족함도 있고, 잘 모르는 부분이 많습니다. 양해 부탁드립니다.
아래 코드는 App.tsx에 대한 기본 코드 설정이다.
먼저 flex에 대해 설명하겠다.
flex는 쉽게 설명하자면 레이아웃에서 얼마큼 자리를 차지할 것인지에 대해 나타내 주는 것이다.
style1, style2, style3에 width값을 주석 처리해주고 style1에는 flex:1을 추가, style1에는 flex:3을 추가, style3에는 flex:2를 추가
위에서부터 차례로 1번 색, 2번 색, 3번 색이라고 말하겠다. 1번 색에 style1 연결하고, 2번 색에 style2 연결하고, 3번 색에 style3 연결해준다. 시각적으로 바로 알 수 있겠지만 flex의 값이 클수록 더 많은 공간을 차지하게 된다.
좀 더 정확하게 말한다면 1+3+2 = 6, 즉 1번 색은 1/6, 2번 색은 3/6, 3번 색은 2/6만큼의 공간을 차지하게 되는 것이다.
다음은 flexDirection에 대해 설명하겠다. flexDirection은 자식 컴포넌트가 배치되는 방향을 설정해주는 것이다.
- row 자식 컴포넌트를 왼쪽에서 오른쪽 방향으로 배치되게 해 준다.
- column 자식 컴포넌트를 위에서 아래 방향으로 배치되게 해 준다.
- row-reverse 자식 컴포넌트를 오른쪽에서 왼쪽 방향으로 배치되게 해 준다.
- column-reverse 자식 컴포넌트를 아래에서 위 방향으로 배치되게 해 준다.
여기서 column은 기본값으로 별다른 설정을 하지 않으면 자식 컴포넌트들은 위에서 아래 방향으로 배치되게 될 것이다.
styleContainer에 flexDirection: 'row'를 추가해주고 style 1,2,3의 flex값을 1로 통일해준다.
그렇게 설정하고 코드를 실행하게 되면 위의 그림처럼 나오게 될 것이다.
이번에는 styleContainer에 flexDirection: 'row'를 styleContainer에 flexDirection: 'column'으로 바꿔주고, 주석처리해주었던 width값을 살려주면 아래의 그림처럼 화면이 바뀌게 될 것이다.
row-reverse, column-reverse는 예제의 반대로 실행되기 때문에 따로 보여드리지는 않겠습니다.
justifyContent 컨테이너의 flexDirection 축에 따라 자식 컴포넌트들을 배치해주는 것이다.
- flex-start 컨테이너의 축의 시작에 자식 컴포넌트를 배치한다.
- flex-end 컨테이너의 축의 끝에 자식 컴포넌트를 배치한다.
- center 컨테이너의 축 중간에 자식 컴포넌트를 배치한다.
- space-between 컨테이너의 축 중간을 가로질러 자식 컴포넌트를 균등한 간격을 두어 남은 공간에 배치한다.
- space-around 컨테이너의 축 중간을 가로질러 자식을 배치하지만 인정한 자식들과의 간격이 모두 동일하게 되도록 배치한다.
여기서 flex-start는 기본값으로 별다른 설정을 하지 않으면 컨테이너의 축의 시작에 자식 컴포넌트를 배치하게 될 것이다.
styleContainer에 justifyContent: "flex-start"를 추가해준다.
그러면 위와 같이 실행될 것이다.
styleContainer에 justifyContent: "flex-end"로 바꿔준다.
그러면 위의 그림과 같이 실행될 것이다.
styleContainer에 justifyContent: "center"로 바꿔준다.
그러면 위의 그림과 같이 실행될 것이다.
styleContainer에 justifyContent: "space-between"로 바꿔준다.
그러면 위의 그림과 같이 실행될 것이다.
styleContainer에 justifyContent: "space-around"로 바꿔준다.
그러면 위의 그림과 같이 실행될 것이다.
alignItems 컨테이너의 가로축에 따라 자식 컴포넌트들을 정렬해준다.
- stretch 컨테이너의 가로축과 일치하도록 컨테이너의 자식 컴포넌트를 늘려준다.
- flex-start 컨테이너의 자식을 컨테이너의 가로축 시작에 맞춰준다.
- flex-end 컨테이너의 자식을 컨테이너의 가로 축 끝에 맞춰준다.
- center 컨테이너의 자식을 컨테이너의 가로 축 가운데에 맞춰준다.
여기서 flex-start는 기본값으로 별다른 설정을 하지 않으면 컨테이너의 축의 시작에 자식 컴포넌트를 배치하게 될 것이다. justifyContent는 어떤 상태여도 상관없지만 저자는 center로 설정하였다.
styleContainer에 justifyContent: "stretch" 코드를 추가해준다.
그러면 위의 그림과 같이 실행될 것이다.
styleContainer에 justifyContent: "flex-start"로 바꿔준다.
그러면 위의 그림과 같이 실행될 것이다.
styleContainer에 justifyContent: "flex-end"로 바꿔준다.
그러면 위의 그림과 같이 실행될 것이다.
styleContainer에 justifyContent: "center"로 바꿔준다.
그러면 위의 그림과 같이 실행될 것이다.
모든 경우의 수를 보여주지는 못하여 이 정도의 분량까지만 작성하고, 더 공부가 필요하신 분들은 리액트 네이티브 공식 홈페이지에서 찾아보면 좋을 것 같습니다. 여러 가지 변수들을 바꿔가면서 공부해보면 좋을 것 같습니다. 구럼 2만
'Java, JavaScript > React, React Native' 카테고리의 다른 글
| [React Native] TextInput으로 텍스트 입력을 보여주자 (0) | 2020.04.19 |
|---|---|
| [React Native]FlatList 인터페이스 구현 (0) | 2020.04.16 |
| [React Native] button을 만들어보자 (1) | 2020.04.15 |
| [React Native] Flexbox를 이용한 레이아웃 - (2) (0) | 2020.04.14 |
| [React Native] expo와 typescript로 실행하기 (0) | 2020.04.11 |
