더북(TheBook)

2.1 나만의 컴포넌트 만들기

리액트에서는 App 컴포넌트에 작성한 것과 같이, 컴포넌트를 조합해 새로운 컴포넌트를 만들 수 있습니다. 나만의 컴포넌트를 한번 만들어 볼까요? 그리고 만든 컴포넌트를 App 컴포넌트에 사용해 화면에 나타내보겠습니다.

프로젝트 디렉터리에 components라는 디렉터리를 생성하고, 그 안에 Greeting.js 파일을 생성하세요. 컴포넌트를 만들 때 꼭 디렉터리를 새로 만들어 작업할 필요는 없습니다. 다만, 앞으로 이 책에서 다양한 컴포넌트를 만들 텐데 컴포넌트를 모두 프로젝트 최상단 디렉터리에 만들면 프로젝트를 탐색하기 어려울 수 있으므로 이렇게 따로 디렉터리를 분류해서 진행합니다.

파일을 만든 다음 가장 먼저 해야 할 일은 상단에서 React를 불러오는 것입니다. 다음으로 사용할 컴포넌트를 불러옵니다. 지금은 View 컴포넌트와 Text 컴포넌트를 불러오겠습니다.

components/Greeting.js

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

그다음에는 컴포넌트를 선언해볼 건데요. 새로운 컴포넌트를 선언하는 방법은 두 가지가 있습니다. 첫 번째 방법은 함수로 컴포넌트를 선언하는 것이고, 두 번째 방법은 클래스로 컴포넌트를 선언하는 것입니다. 가장 많이 사용하는 방법은 함수로 선언하는 것입니다. 클래스는 2018년 전에 주로 사용하던 방법이고, 이 책에서는 다루지 않습니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.