나만의 컴포넌트(Component) 만들기

이번엔 컴포넌트를 만들어보겠다.

파일을 만든 다음 가장 먼저 해야 할 일은 상단에 React를 불러오는 것이다. 다음으로 사용할 컴포넌트를 불러온다.

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

 

그 다음 컴포넌트를 선언할 것인데, 선언하는 방법은 함수로 선언하는 방법과 클래스로 컴포넌트를 선언하는 방법 2가지가 있다. 클래스는 예전에 주로 사용하던 방법이고 주로 함수로 선언한다.

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

function hello() {
  return (
    <View>
      <Text>Hello World</Text>
    </View>
  );
}

export default hello;

 

 

함수로 선언한 컴포넌트에서는 이와 같이 XML 형태로 이루어진 내용을 반환해줘야 한다. 이 문법을 JSX라고 부른다.

최하단의 export default hello;는 다른 컴포넌트에서도 불러올 수 있게 해준다.

 

이제 Hello 컴포넌트를 App 컴포넌트에서 불러와 사용해보겠다.

import React from 'react';
import {SafeAreaView} from 'react-native';
import Hello from './component/Hello';

const App = () => {
  return (
    <SafeAreaView>
      <Hello />
    </SafeAreaView>
  );
};

export default App;

이제 react-native run-ios 명령어로 iOS 시뮬레이터를 실행해보면 컴포넌트가 정상적으로 나타나는 것을 확인할 수 있다.

위에 코드에서 Hello 컴포넌트를 선언하는 방법과 App 컴포넌트를 선언하는 방법이 다른것을 확인할 수 있는데, 두 방법은 다르지 않다.

로직 없이 바로 반환하는 코드라면 App 컴포넌트 선언방법처럼 App = () => 을 사용하고 로직이 있는 함수라면 Hello 컴포넌트를 선언하는 방법으로 선언한다.

어느 방법을 사용하던 상관없고 일관성 있게 취향에 따라 사용하면 된다.

페이스북의 앤드류 클락과 댄 아브라모프는 Hello 컴포넌트 처럼 function 문법을 주로 사용한다고 한다.