Introduction

Before we start

Introduction · React Native

공식문서 상으로는, "일단은" 리액트를 시작하는 사람부터 숙련된 앱 개발자까지 다 커버할 수 있는 설명이라고 한다. 해당 페이지는 대략적인 개념을 소개하는 곳으로, 리액트라는 개념이 생소한 사람은 이 페이지를 읽고, 그렇지 않은 사람들은 넘어가도 된다고 한다.

A re-introduction to JavaScript (JS tutorial)

JS re-introduction MDN 문서인데, 이것도 시간 나면 정독을 해 보도록 하자.

Components

오직 Class Component 만이 state 를 사용할 수 있었으나, 지금은 Hooks API 를 통해 Function Component 에서도 활용할 수 있다.

---

Core Concepts and Native Components

Core Components and Native Components · React Native

React Native 는 React 와 비슷한 형태로 JS 를 통해 각 OS 의 native API 를 접근할 수 있게 해주는 오픈소스 프레임워크이다. 그렇기 때문에 React 를 알아야 하지만, 그 이전에 어떻게 React Native 가 동작하는지 확인해보자.

Views and Mobile development

안드로이드와 iOS 에서, UI의 가장 기본적인 단위로 view 를 사용한다. view 는 스크린 위에 표시되는 직사각형의 element 로, 텍스트, 이미지, 혹은 유저의 요청(reqeust) 에 대한 응답결과(response) 를 render 하는 역할을 담당한다. 애플리케이션의 아주 사소한 부분, 가령 한 줄의 text, 심지어는 button 까지도 view 라고 볼 수 있다.

사진을 보면 더욱 이해하기 쉽다. 위에 나온 사진과 같이 menu 의 image 도, 그리고 그 이미지의 이름을 나타내는 text 도, 그 둘을 감싸는 warpper 도 전부 다 view이다.

Native Components

안드로이드를 개발할 때, 다시 말 해 안드로이드에서의 view 를 만들 때는 Java 혹은 Kotlin 을 사용한다. 그리고 iOS 를, 즉 iOS의 view 를 만들 때는 Objective-C 혹은 Swift 를 사용한다. React Native 와 함께라면 위의 Javascript 를 통해 만든 React Component 를 통해 이들을 호출하여 사용할 수 있다(invoke).

구동환경(Runtime)에서, React Native 는 안드로이드와 iOS 각각에 알맞는 view 를 만들어낸다. 이렇게 React Native 가 안드로이드와 iOS 각각의 view 를 지원하기 때문에, React Native 를 통해 만든 앱은 외양 면에서나, 사용자의 경험 면에서나, 그리고 성능 면에서나 다른 native app 과 크게 다르지 않다. React 의 단위 하나하나가 component 였던 것처럼, React Native 에서는 이 view 단위 하나하나를 Native Component 라고 한다.

React Native Directory

또한, 아주 번창하는 React Native 의 생태계(ecosystem)에서 만든 다양한 오픈소스 컴포넌트(community-contributed components)들도 있다.

Core Component

Core Components and APIs · React Native

Core Component 란, 애플리케이션을 처음에 만들 때 사용하게 되는 컴포넌트들의 명칭이다. 모든 컴포넌트들은 위의 링크에서 참조할 수 있고, 자주 쓰는 Core Component 들은 이 정도이다.

Core Components we will mostly work with

그러나, 앞서 말 했듯이 React Native 는 React 와 유사한 API 구조를 사용한다. 그렇기 때문에 본격적으로 React Native 학습을 시작하기 이전에, 먼저 React 를 숙지해야 할 필요가 있다. (다이어그램으로 그려보면 위와 같은 포함관계이다)

---

React Fundamental

React Fundamentals · React Native

React Native 를 위해 React 에서 알아야 하는 핵심 개념은 일단 네 가지이다. 나머지 개념들의 복습이 필요하다면, React 공식문서를 복습하는 걸 권장한다.

Your First Component

JavaScript ‪Module Cheatsheet 📄‬

export

import React from 'react';
import { text } from 'react-native';

const Cat = () => {
	return (
		<Text>Hello, I am your cat!</Text>
	);
}

export default Cat;

React 의 문법과 똑같다. function component 를 사용해서, return 을 선언하고, 그 안에서 return 할 내용들을 작성한 뒤, export 해 주는 구조.

JSX

React 는 JavaScripts 의 superset 격인 JSX 를 사용하기 때문에, HTML tag 안에 변수를 사용할 수 있다.

import React from 'react';
import { text } from 'react-native';

const Cat = () => {
	const name: string = 'meow';
	return (
		<Text>Hello, I am {name}t!</Text>
	);
}

export default Cat;

Template literal 을 통해 함수의 호출값을 바로 사용할 수도 있다.

import React from 'react';
import { text } from 'react-native';

const Cat = () => {
	const fullName = (first: string, second: string, third: string) => {
		return first + ' ' + second + ' ' + third;
	}
	return (
		<Text>Hello, I am {fullName('rum', 'pum', 'pum')}t!</Text>
	);
}

export default Cat;