[React.js] 컴포넌트란? ( Component )

컴포넌트란?

React에서 UI를 담당하는 클래스

( 여러 요소를 화면에 렌더링해주는 역할 )

 

클래스 컴포넌트 작성 방식

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

// 클래스 컴포넌트는 React의 Component 클래스를 반드시 상속해야한다.
export default class ClassComponent extends Component {
  render() {
    return <Text>Hello world!</Text>;
  }
  /*
    render() 메소드 사용해서 가상DOM을 물리DOM으로 바꾸어 화면에 표출
    render() 메소드는, 반드시 null, undefined, React.createElement반환값, JSX구문을 반환해야함
  */
}

 

함수형 컴포넌트 작성 방식

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

function FunctionComponent() {
  return <Text>Hello world!</Text>;
};

export default FunctionComponent;

일반적으로 속성이 없는 컴포넌트에 사용하는 것이 편하다

 

애로우 컴포넌트 작성 방식

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

const ArrowComponent = () => {
  return <Text>Hello world!</Text>;
};

export default ArrowComponent;

일반적으로 속성이 있는 컴포넌트에 사용하는 것이 편리하다
( 속성 :  )