기본 개념 익히기

React Native는 React와 비슷하지만, 웹 컴포넌트 대신 네이티브 컴포넌트를 빌딩 블록으로 사용한다. 따라서 React Native 앱의 기본 구조를 이해하려면 JSX, 컴포넌트, state, props와 같은 React의 기본 개념을 알아야 한다. 이미 React를 알고 있다 하더라도, 네이티브 컴포넌트와 같은 React Native만의 특징을 추가로 배워야 한다. 이 튜토리얼은 React 경험이 있든 없든 모든 독자를 대상으로 한다.

시작해 보자.

Hello World

오랜 전통에 따라, 우리는 "Hello, world!"만 출력하는 간단한 앱을 먼저 만들어 보자. 아래는 그 예제다:

궁금하다면 웹 시뮬레이터에서 직접 코드를 수정해 볼 수 있다. 또한 이 코드를 App.js 파일에 붙여넣어 로컬 머신에서 실제 앱을 만들 수도 있다.

여기서 무슨 일이 일어나고 있나?

먼저, JSX를 사용하기 위해 React를 불러온다. JSX는 각 플랫폼의 네이티브 컴포넌트로 변환된다.
두 번째 줄에서는 react-native에서 Text와 View 컴포넌트를 불러온다.

그 다음, HelloWorldApp 함수를 정의한다. 이 함수는 함수형 컴포넌트로, 웹에서의 React와 동일하게 동작한다. 이 함수는 스타일이 적용된 View 컴포넌트와 그 안에 포함된 Text 컴포넌트를 반환한다.

Text 컴포넌트는 텍스트를 렌더링하는 데 사용되며, View 컴포넌트는 컨테이너를 렌더링한다. 이 컨테이너에는 여러 스타일이 적용되어 있는데, 각 스타일이 어떤 역할을 하는지 살펴보자.

첫 번째 스타일은 flex: 1이다. flex 속성은 아이템이 메인 축을 따라 사용 가능한 공간을 어떻게 채울지 정의한다. 여기서는 하나의 컨테이너만 있으므로, 부모 컴포넌트의 모든 공간을 차지한다. 이 경우에는 유일한 컴포넌트이므로 전체 화면 공간을 차지하게 된다.

다음 스타일은 justifyContent: "center"이다. 이 속성은 컨테이너의 메인 축을 기준으로 자식 요소를 중앙에 정렬한다. 마지막으로 alignItems: "center"는 컨테이너의 교차 축을 기준으로 자식 요소를 중앙에 정렬한다.

여기서 일부 내용이 JavaScript처럼 보이지 않을 수 있다. 걱정하지 마라. 이것이 미래이다.

먼저, ES2015(ES6로도 알려짐)는 JavaScript의 개선 사항 집합으로, 이제 공식 표준의 일부이지만 아직 모든 브라우저에서 지원되지 않기 때문에 웹 개발에서는 자주 사용되지 않는다. React Native는 ES2015를 지원하므로, 호환성 걱정 없이 이 기능을 사용할 수 있다. 위 예제의 import, export, const, from은 모두 ES2015 기능이다. ES2015에 익숙하지 않다면, 이 튜토리얼과 같은 샘플 코드를 통해 쉽게 이해할 수 있다. 원한다면, 이 페이지에서 ES2015 기능을 잘 요약하고 있다.

이 코드 예제에서 또 다른 특이한 점은 <View><Text>Hello world!</Text></View>이다. 이것은 JSX로, JavaScript 내에 XML을 삽입하는 문법이다. 많은 프레임워크는 마크업 언어 안에 코드를 삽입할 수 있는 전용 템플릿 언어를 사용한다. React에서는 이것이 반대로, 코드 안에 마크업 언어를 작성할 수 있다. 웹에서의 HTML과 비슷해 보이지만, <div>나 <span>과 같은 웹 요소 대신 React 컴포넌트를 사용한다. 이 경우, <Text>는 텍스트를 표시하는 코어 컴포넌트이고, View는 <div>나 <span>과 유사하다.

컴포넌트

이 코드는 HelloWorldApp이라는 새로운 컴포넌트를 정의한다. React Native 앱을 개발할 때는 새로운 컴포넌트를 자주 만들게 된다. 화면에 보이는 모든 것은 어떤 형태의 컴포넌트로 구성된다.

Props

대부분의 컴포넌트는 생성 시 다양한 매개변수로 커스터마이징할 수 있다. 이러한 생성 매개변수를 props라고 부른다.

여러분이 만든 컴포넌트도 props를 사용할 수 있다. 이를 통해 하나의 컴포넌트를 앱의 여러 곳에서 조금씩 다른 속성으로 재사용할 수 있다. 함수형 컴포넌트에서는 props.YOUR_PROP_NAME을, 클래스 컴포넌트에서는 this.props.YOUR_PROP_NAME을 참조한다. 아래 예제를 살펴보자:

TypeScript
JavaScript

name을 props로 사용하면 Greeting 컴포넌트를 커스터마이징할 수 있다. 이를 통해 각각의 인사말에 대해 동일한 컴포넌트를 재사용할 수 있다. 이 예제에서는 JSX에서 Greeting 컴포넌트를 사용했다. 이런 방식으로 컴포넌트를 재사용할 수 있는 점이 React의 강력한 특징이다.

여기서 새롭게 등장한 것은 View 컴포넌트다. View는 다른 컴포넌트를 담는 컨테이너 역할을 하며, 스타일과 레이아웃을 제어하는 데 유용하다.

props와 기본적인 Text, Image, View 컴포넌트를 활용하면 다양한 정적 화면을 구성할 수 있다. 앱이 시간에 따라 변화하도록 만들고 싶다면 State에 대해 배워야 한다.

상태

읽기 전용이며 수정할 수 없는 props와 달리, state는 React 컴포넌트가 사용자 동작, 네트워크 응답 등에 따라 시간이 지남에 따라 출력을 변경할 수 있게 한다.

React에서 state와 props의 차이점은 무엇인가?

React 컴포넌트에서 props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 변수이다. 반면에 state도 변수이지만, props와 달리 매개변수로 전달되지 않고 컴포넌트 내부에서 초기화하고 관리한다.

React와 React Native에서 상태를 다루는 방식에 차이가 있을까?

tsx
// ReactJS에서 훅을 사용한 카운터 예제!

import React, {useState} from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="container">
      <p>You clicked {count} times</p>
      <button
        onClick={() => setCount(count + 1)}>
        Click me!
      </button>
    </div>
  );
};

// CSS
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

tsx
// React Native에서 훅을 사용한 카운터 예제!

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

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text>You clicked {count} times</Text>
      <Button
        onPress={() => setCount(count + 1)}
        title="Click me!"
      />
    </View>
  );
};

// React Native 스타일
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

위 예제에서 보듯이, React와 React Native에서 state를 다루는 방식에는 차이가 없다. 클래스 컴포넌트와 함수형 컴포넌트 모두에서 훅을 사용해 상태를 관리할 수 있다.

다음 예제에서는 클래스를 사용해 동일한 카운터 예제를 보여준다.

Hello World​

여기서 무슨 일이 일어나고 있나?​

컴포넌트​

Props​

상태​

React에서 state와 props의 차이점은 무엇인가?​

React와 React Native에서 상태를 다루는 방식에 차이가 있을까?​