[리액트 네이티브] 회원가입 페이지 제작 -2-

김민선·2025년 1월 15일

UI 리액트 네이티브

레이아웃

이번 강의에서는 레이아웃을 잡아보았다.

https://www.youtube.com/watch?v=elDMXQDLZ2w

영상에서는 토스 회원가입 페이지를 이용하여 설명해주셨는데, 파트를 나눠서 레이아웃을 지정하는 방법을 알려주셨다. 예를 들어 다음 화면에서

입력한 정보가 맞다면~ / 정보 입력 부분 / 확인 버튼 부분의 비율을 20 : 50 : 30 으로 나누었다. 색을 다 다르게 지정하면 다음과 같이 나온다.

맨 위에 있는 문구 또한 작성해주면

이런 식으로 나오는데, 토스 ui와 비슷하게 만드려면 view에 다음 스타일을 추가해줘야 한다.

display: 'flex',
justifyContent: 'flex-end'

그러면 다음과 같이 나온다. (SafeAreaView의 배경색 black도 white로 변경함)

리액트 네이티브나 html 코드를 작성하면서 진짜 가장 헷갈렸던 부분이 저 정렬하는 부분이었는데, 이 참에 다시 공부해보려 한다. 블로그를 참고하여 내가 헷갈리는 부분만 정리해보겠다!
https://yuddomack.tistory.com/8

Flex

Flex는 크기를 비율로 설정하는 것이다. 부모 View 크기의 특정 비율만큼 차지한다. 부모의 크기에 영향을 받으므로 이 속성을 사용할 때, 부모의 크기를 지정하였는지 잘 확인해야 한다!

다음 코드를 보면 이해가 쉽다.

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.case1} />
        <View style={styles.case2} />
        <View style={styles.case3} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  case1: {
    flex: 1,
    backgroundColor: 'red',
  },
  case2: {
    flex: 3,
    backgroundColor: 'green',
  },
  case3: {
    flex: 1,
    backgroundColor: 'blue',
  },
});

그리고 강의 영상에서 작성한 display: flex는 요소를 flex container로 만들어준다. 이 속성을 사용하게 되면 자식 요소들의 레이아웃을 유연하게 제어할 수 있게 된다. 기본적으로 자식 요소들은 가로로 배치되고, 자신이 가진 내용물의 너비만큼 공간을 차지한다.
flex container로 바꾸어줬기 때문에 justifyContent: 'flex-end' 속성을 적용하는 것이 가능해진 것이다!

Flex Direction

Flex Direction은 row, column 속성을 사용할 수 있으며, 자식 요소들을 가로 또는 세로로 쌓기 위해 사용된다. Flex Direction의 기본속성은 Column으로, 세로로 배치된다.

왼쪽이 Flex Direction이 column일 경우이고, 오른쪽이 Flex Direction이 row일 경우이다.
헷갈리지 않도록 주의~..

Align Items

Align Items는 배치방향(Flex Direction)으로부터 수직한 정렬을 의미한다. Flex Direction이 column이라면 가로 정렬을 의미하고, Flex Direction이 row라면 세로 정렬을 의미한다. flex-start, center, flex-end, stretch, basline 총 5가지 속성을 가지고 있다.

flex-start는 가로 정렬을 기준으로 좌측, center는 가운데, flex-end는 우측을 뜻한다. stretch는 정렬 방향의 크기를 지정하지 않았을 때 flex-start 지점부터 flex-end까지 쭉 늘리는 속성이다.

세로 정렬일 때는 다음과 같다.

Justify Content

Justify Content는 Flex Direction으로부터 수평한, 즉 같은 방향으로 정렬된다.

Align Items와 flex-start, center, flex-end는 동일하지만, space-between, space-around라는 속성을 가지고 있다. space-between은 양쪽 정렬, space-around는 공백이 있는 양쪽 정렬이라고 생각하면 된다.

왼쪽이 space-between, 오른쪽이 space-around이다. space-between은 양 끝을 기점으로 요소간의 거리를 균등하게 정렬 하고, space-around는 공백을 포함한 상태로 균등하게 정렬한다.