리액트네이티브 입문 3 — 스타일링

6 min readFeb 16, 2024

해당 글은 앱 개발 입문자를 위한 안내 문서를 먼저 참고 하시고 보시는 것을 추천드립니다. 여기서는 리액트네이티브를 공부하기에 앞서 필요한 기초 지식을 다룹니다. 이번 편은 리액트입니다. 이는 개발 시작에 앞서 최소한의 내용만 숙지시키는 것이 목적입니다.

리액트네이티브의 장점 중 하나는 UI를 만들기 위해 웹에서 사용되는 CSS 문법을 사용할 수 있다는 것입니다. 이는 프레임워크마다 고수하는 다양한 UI를 만드는 기술을 습득하지 않아도 광범위하게 CSS 기술을 응용할 수 있게 해주어 개발자들에게 굉장히 큰 이점을 가져다주었습니다.

CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 시트 언어입니다. 리액트네이티브에서는 CSS와 유사한 스타일링 방식을 사용하지만, 정확히 같은 문법은 아니며 ‘스타일시트’라는 이름의 JavaScript 객체를 사용하여 스타일을 정의합니다. 이 방식은 웹 개발에서의 CSS와 매우 비슷하게 느껴질 수 있지만, 카멜 케이스(camelCase)를 사용하여 속성 이름을 지정하고, 값은 대부분 문자열 대신 숫자나 객체로 표현됩니다.

import React from 'react';
import { Text, StyleSheet, View } from 'react-native';

const App = () => (
  <View style={styles.container}>
    <Text style={styles.textStyle}>Hello, React Native!</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  textStyle: {
    color: 'blue',
    fontSize: 20,
  },
});

export default App;

위 코드에서 StyleSheet.create 메서드를 사용하여 container와 textStyle이라는 두 개의 스타일 객체를 정의하고 있습니다. container 스타일은 뷰의 배경색, 정렬 방식 등을 지정하며, textStyle 스타일은 텍스트의 색상과 글꼴 크기를 정의합니다. 이러한 방식으로 리액트네이티브에서도 CSS와 유사한 스타일링을 적용할 수 있습니다.

더 나아가 우리는 Emotion 라이브러리를 리액트네이티브에서 사용하고 있어 이를 사용할 것을 권장하고 있습니다.Emotion CSS 라이브러리는 스타일링을 위한 강력하고 유연한 도구로, 리액트네이티브 개발에도 적용할 수 있습니다. Emotion을 사용하면 JavaScript와 CSS의 강점을 결합하여 컴포넌트 스타일을 쉽게 정의하고 관리할 수 있습니다.

리액트네이티브에서 Emotion을 사용하는 기본 예시는 다음과 같습니다.

import React from 'react';
import styled from '@emotion/native'; // Emotion 라이브러리 임포트

// Emotion을 사용한 스타일링
const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: #F5FCFF;
`;

const StyledText = styled.Text`
  color: blue;
  font-size: 20px;
`;

const App = () => (
  <Container>
    <StyledText>Hello, React Native with Emotion!</StyledText>
  </Container>
);

export default App;

리액트네이티브에서 스타일링을 위해 CSS 문법을 익히는 것은 중요하며, 특히 flex를 이해하는 것이 핵심입니다. 리액트네이티브의 레이아웃 시스템은 웹의 CSS Flexbox와 매우 유사하게 작동하며, 이는 모바일 앱 개발에서 유연한 레이아웃과 디자인을 구현하는 데 필수적입니다.

Flex란?

Flex는 컨테이너 내 아이템의 배치, 정렬, 그리고 분배를 위한 효율적인 방법을 제공합니다. 리액트네이티브에서 flex 속성을 사용하면 컨테이너 내에서 자식 요소들이 어떻게 배치되고 차지하는 공간을 어떻게 분배할지 제어할 수 있습니다.

기본 Flex 속성

flex: 요소가 차지할 공간의 비율을 결정합니다. 더 높은 숫자는 더 많은 공간을 차지하게 됩니다.
flexDirection: 주축(main axis)의 방향을 결정합니다. row (수평), column (수직) 중 선택할 수 있습니다.
justifyContent: 주축(main axis)에 따라 자식 요소들을 어떻게 정렬할지 결정합니다. 예를 들어 flex-start, center, flex-end, space-between, space-around 등이 있습니다.
alignItems: 교차 축(cross axis)에 따라 자식 요소들을 어떻게 정렬할지 결정합니다. 예를 들어 flex-start, center, flex-end, stretch 등이 있습니다.
alignSelf: 개별 아이템이 교차 축(cross axis)에 따라 어떻게 정렬될지 결정합니다. auto, flex-start, center, flex-end, stretch 등을 사용할 수 있습니다.

https://www.youtube.com/watch?v=07ioPW-VKd4&t=737s

관련하여 과거에 찍은 Flex 영상을 추천드립니다. 시청해 주시고 Flex에 대한 이해를 하고 레이아웃 배치 및 CSS에 대해 익숙해지시는 시간이 되시길 바랍니다.

리액트네이티브 입문 3 — 스타일링

Flex란?

기본 Flex 속성

Written by Hyo

No responses yet