Skip to main content
Version: Next

기본 개념 익히기

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

자, 시작해보자.

Hello World​

오랜 전통에 따라, "Hello, world!"라는 메시지를 출력하는 간단한 앱을 만들어 보자. 아래는 그 예제 코드다:

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

여기서 무슨 일이 일어나고 있는지 차근차근 살펴보자.

  1. 먼저 JSX를 사용하려면 React를 임포트해야 한다. JSX는 각 플랫폼의 네이티브 컴포넌트로 변환된다.
  2. 두 번째 줄에서는 react-native에서 Text와 View 컴포넌트를 임포트한다.

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

Text 컴포넌트는 텍스트를 렌더링하고, View 컴포넌트는 컨테이너를 렌더링한다. 이 컨테이너에는 여러 스타일이 적용되어 있다. 각 스타일이 어떤 역할을 하는지 하나씩 분석해보자.

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

다음으로 justifyContent: "center"가 있다. 이 속성은 컨테이너의 주축을 기준으로 자식 요소를 가운데 정렬한다. 마지막으로 alignItems: "center"는 컨테이너의 교차축을 기준으로 자식 요소를 가운데 정렬한다.

이 코드에서 일부 부분이 일반적인 자바스크립트처럼 보이지 않을 수 있다. 하지만 걱정할 필요 없다. 이것이 미래다.

먼저, ES2015(ES6로도 알려짐)는 자바스크립트에 대한 개선 사항들의 모음으로, 이제 공식 표준에 포함되었지만 모든 브라우저에서 지원되지는 않아 웹 개발에서는 아직 널리 사용되지 않는다. React Native는 ES2015를 지원하므로, 호환성 걱정 없이 이 기능들을 사용할 수 있다. 위 예제에서 사용된 import, export, const, from은 모두 ES2015의 기능이다. ES2015에 익숙하지 않다면, 이 튜토리얼과 같은 샘플 코드를 통해 쉽게 익힐 수 있다. 더 자세한 내용은 이 페이지에서 확인할 수 있다.

이 코드에서 또 다른 특이한 점은 <View><Text>Hello world!</Text></View>와 같은 구문이다. 이것은 JSX로, 자바스크립트 안에 XML을 삽입하는 구문이다. 많은 프레임워크는 마크업 언어 안에 코드를 삽입할 수 있는 전용 템플릿 언어를 사용한다. React에서는 이 방식을 뒤집었다. JSX는 코드 안에 마크업 언어를 작성할 수 있게 해준다. 웹의 HTML과 비슷해 보이지만, <div>나 <span> 대신 React 컴포넌트를 사용한다. 여기서 <Text>는 텍스트를 표시하는 코어 컴포넌트이고, View는 <div>나 <span>과 유사한 역할을 한다.

컴포넌트​

이 코드는 새로운 Component인 HelloWorldApp을 정의한다. 리액트 네이티브 앱을 개발할 때, 여러분은 새로운 컴포넌트를 자주 만들게 된다. 화면에 보이는 모든 것은 어떤 형태의 컴포넌트로 구성된다.

Props​

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

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

name을 prop으로 사용해 Greeting 컴포넌트를 커스터마이징할 수 있다. 이를 통해 각각의 인사말에 동일한 컴포넌트를 재사용할 수 있다. 이 예제에서는 JSX 내에서 Greeting 컴포넌트를 사용한다. 이러한 기능이 바로 React의 강점이다.

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

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

상태​

읽기 전용인 props와 달리, state는 React 컴포넌트가 사용자 동작, 네트워크 응답 등에 따라 시간이 지남에 따라 출력을 변경할 수 있게 해준다. props는 수정할 수 없지만, state는 컴포넌트 내부에서 관리되며 필요에 따라 업데이트할 수 있다. 이를 통해 컴포넌트는 동적인 데이터를 처리하고 UI를 업데이트할 수 있다.

React에서 state와 props의 차이점​

React 컴포넌트에서 props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 변수다. 반면에 state도 변수이지만, 중요한 차이점은 state는 외부에서 전달되는 것이 아니라 컴포넌트가 내부적으로 초기화하고 관리한다는 것이다.

요약하면:

  • props: 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터
  • state: 컴포넌트 내부에서 관리되고 업데이트할 수 있는 데이터

이 두 개념은 React의 데이터 흐름을 이해하는 데 핵심적이다. props는 컴포넌트 간 데이터를 전달하는 데 사용되고, state는 컴포넌트 내부의 동적인 데이터를 관리하는 데 사용된다.

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에서 상태를 다루는 방식에는 차이가 없다. 클래스 컴포넌트와 함수형 컴포넌트에서 모두 훅을 사용해 상태를 관리할 수 있다!

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