[React-Native] 컴포넌트(Component)

교재 <리액트 네이티브 인 액션> 

 

컴포넌트(Component)

: 데이터와 UI 요소의 집합체

React-Native에서의 앱 개발은 각각의 컴포넌트들을 레고 블록이라고 생각하고, 이들을 잘 조립하여 하나의 커다란 레고 작품을 만드는 과정이라고 생각하면된다. 따라서 컴포넌트의 구성과 조립으로 나누어 설명할 수 있다.

 

 

컴포넌트 구성하기

 createClass 구문이나 createElement를 이용한 컴포넌트 구성 방식도 있지만,가장 대중적으로, 또 개발자들이 추천하는 두가지 방식에 대해서만 정리했다. 아래 예시 코드의 내용은 Hello World! 라는 텍스트를 보여주는 컴포넌트 구성방식이다.

 

• class구문(ES2015, JSX)
  고유한 상태를 유지하는 stateful 컴포넌트를 만들 때 주로 사용, class로 감싸져있는 형태.

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

class MyComponent extends React.Component{
     render(){
          return(
               <View>
                    <Text> Hello World! </Text>
               </View>
          )
     }
}

 

• stateless(재사용) 컴포넌트(JSX)
  stateless 컴포넌트 만들 떄 사용, 클래스 없는 객체 선언 방식으로 위의 방법보다 훨씬 깔끔함

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

const MyComponent = () => (
     <View>
          <Text> Hello World! </Text>
     </View>
)

혹은

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

function MyComponent(){
     return <View><Text> Hello World! </Text></View>
}

 

❗ 컴포넌트를 만드는 방식은 여러가지지만, 프로젝트 전반에 걸쳐 일관성 있게 작업하는게 좋다!

❗ 컴포넌트 구성 후 파일의 하단에 export default 컴포넌트명 을 작성하면 외부에서도 사용 가능하다.

• class 구문 구성 방식이라면 class 앞에 export default 를 써주어도 무방하다.

❓ export & export default의 차이

종류	선언 횟수	외부 파일에서의 import 방식
export	여러 컴포넌트에서 선언 가능	import { 정확한 컴포넌트명 } from "./파일이름"
export default	한가지 컴포넌트만 선언 가능	import 아무개 from "./파일이름"

export default는 해당 파일에 존재하는 대표 컴포넌트 하나만 반환하므로, 참조하는 외부 파일에서 어떤 이름을 붙여도 상관 없다. 하지만 export는 여러개의 컴포넌트들이 전달될 수 있으므로, 참조하는 외부 파일에서 정확한 명칭으로 컴포넌트들을 불러와야한다.

 

 

컴포넌트 조립하기

  조립과정은 하나의 예를 들어서 설명하겠다. 앱의 한 화면의 구성을 크게 쪼개면 Header, Content, Footer의 컴포넌트들로 표현할 수 있다. 그리고 이들을 모두 포함하는 Home에서 하나의 View를 렌더링한다고 할  때 코드는 다음과 같이 작성할 수 있다.

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

export default class Home extends Component {
  render() {
    return (
      <View>
        <Header />
        <Content />
        <Footer />
      </View>
    );
  }
}

const Header = () => (
  <View>
    <Text>Header</Text>
  </View>
);

const Content = () => (
  <View>
    <Text>Content</Text>
  </View>
);

const Footer = () => (
  <View>
    <Text>Footer</Text>
  </View>
);