React Native 컴포넌트란? / 클래스형 컴포넌트와 함수형 컴포넌트의 특징

컴포넌트란?

컴포넌트는 UI를 독립적이고 재사용 가능하도록 기능 단위별로 나눠 놓은 단위이다.

화면의 구성 요소들은 여러가지 컴포넌트들로 이루어져 있다. 또한, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행할 수도 있다.

반응형

 

주요 컴포넌트

SafeAreaView	상단에 상태 바와 하단에 홈 버튼 영역을 제외한 영역에 콘텐츠를 표시할 때 사용
View	상태바와 홈 버튼 영역까지 콘텐츠 표시
StyleSheet	리액트 네이티브 컴포넌트에 스타일 적용할 때 사용 리액트 네이티브에서 스타일을 적용하기 위해서는 인라인 스타일과 StyleSheet를 사용하는 방법이 있음
ScrollView	화면 스크롤이 가능한 컴포넌트 화면 스크롤이 가능한 컴포넌트로는 FlatList, ScrollView 등을 제공하고 있음
Text	텍스트를 입력할 수 있는 컴포넌트
Button	버튼을 사용하기 위한 컴포넌트

 

클래스형 컴포넌트와 함수형 컴포넌트의 특징

클래스형 컴포넌트

import React, {Component} from "react";
import {View, Text} from 'react-native';
class App extends Component {
const name = ‘리액트’;
  render(){
    return(
      <View>
        <Text> {name} </Text>
      </VIew>
    );
  } }
export default App;

• class 키워드 필요
• Component로 상속을 받아야한다.
• render() 메소드가 반드시 있어야한다.
• state, lifeCycle 관련 기능사용 가능하다.
• 메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.

함수형 컴포넌트

import React from "react";
import {View, Text} from 'react-native';
const App = () => {
  const name = ‘리액트’;
  return(
       <View>
              <Text> {name} </Text>
        </VIew>
}
export default App;

• state, lifeCycle 관련 기능 사용 불가능 [Hook을 통해 해결 됨]
• 메모리 자원을 클래스형 컴포넌트보다 덜 사용한다.
• 컴포넌트 선언이 편하다.

반응형

클래스형 컴포넌트와 함수형 컴포넌트 비교

위 코드는 클래스형 컴포넌트와 함수형 컴포넌트의 실행결과가 동일하다.

함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점이 있다. 과거에는 함수형 컴포넌트에서 state와 라이프사이클 API를 사용할 수 없다는 단점이 있었는데, 이러한 단점은 앞서 언급한 것처럼 리액트 훅이 도입되면서 해결되었다.

그리고 클래스 컴포넌트는 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야(return) 합니다. 앞에 class 키워드를 적고 Component를 상속 받아야한다.