[React] React 컴포넌트란? React 앱을 구성하는 요소

📌 컴포넌트 (Component)란?

리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용합니다. 쉽게 말하면 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있고, 레고 블록으로 집을 쌓게 된 경우 하나의 블록이 '컴포넌트'라고 할 수 있습니다. 컴포넌트는 새로운 컴포넌트를 생성할 수 도 있고, MVC 의 뷰를 독립적으로 구성하여 재사용할 수 있습니다. 리액트의 중요한 핵심인 '컴포넌트'에는 함수 컴포넌트, 클래스 컴포넌트 2가지가 있습니다. 

 

• 컴포넌트 구성 요소 

1) property(props) 

- 부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터입니다. 프로퍼티값은 자식 컴포넌트에서 수정할 수 없습니다. 

2) state

- 컴포넌트의 상태를 저장하고 수정 가능한 데이터입니다. 

3) context 

- 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에게 전달하는 데이터입니다. 

 

⚡함수(Function) 컴포넌트

• 함수 컴포넌트란? 

함수형 컴포넌트는 말 그대로 자바스크립트의 "함수(function)" 기반 컴포넌트입니다. 자바스크립트 함수를 선언하듯이 function 으로 컴포넌트를 정의하고, return 문에 JSX 코드를 반환합니다.

function MyComponent() {
  return (
    <div>
      Hello React!
    </div>
  );
}

 

또한 화살표 문법으로도 나타낼 수 있어요. 

const function =  (param1, param2, … ) => { statements }

const MyComponent = () => {
    return (
        <div>
            Hello React!
        </div>
    );
};

 

컴포넌트는 Visual Studio Code 환경에서 "Reactjs Code snippet" 라이브러리를 사용하면 편하게 생성 가능합니다. rsc를 입력하면 함수형 컴포넌트가 자동완성되는데요. MyComponent.js 파일에서 Hello React!를 나타내는 코드입니다. 

 

• 함수 컴포넌트를 사용하는 이유 

1) Hooks

과거에는 함수형 컴포넌트가 state, 라이프사이클을 지원하지 않았기 때문에 클래스형 컴포넌트를 많이 사용했지만, React v16 이후부터 Hooks를 통한 state 및 LifeCycle 관리가 가능해져 리액트에서 공식적으로 함수형 컴포넌트 사용을 권장합니다. Hook의 useState를 사용해 state 를 관리할 수 있고, useEffect 를 사용해 LifeCycle 을 관리할 수 있어요. 

2) 직관적인 코드   

자바스크립트의 함수(function) 선언, 화살표 함수를 그대로 사용해 컴포넌트를 사용 가능하기 때문에 개발자에게 직관적입니다. 

3) 메모리 자원 효율 

클래스형 컴포넌트에 비해 함수형 컴포넌트가 비교적 메모리 자원을 적게 사용합니다. 

 

 

⚡ 클래스(Class) 컴포넌트

• 클래스 컴포넌트란? 

클래스 컴포넌트는  자바스크립트의 "클래스" 기반 컴포넌트로, class로 정의하고 render() 함수에서 jsx 코드를 반환합니다. 

 

• 클래스 컴포넌트 특징 

1) class 키워드로 클래스 컴포넌트 생성
2) React.Component 상속

React의 ComponentClass를 상속받아  Component 상속이 필요해요. 

3) render () 메서드 필수로 사용  

 클래스 컴포넌트 안에 render() 메서드가 꼭 필요하고 메서드 안에 JSX 를 리턴합니다. 

4) this 키워드 사용하기 

state, props, refs,컴포넌트 메서드, 생명주기 메서드를 사용할 때 this 로 프로퍼티를 참조하여 사용합니다. 

 

• 클래스 컴포넌트 생성하기 

클래스 컴포넌트는 React의 ComponentClass를 상속받아 구현되기 때문에 반드시 {Component}를 import 하고 React.Component 를 상속받아야합니다. 

import React, { Component } from 'react';

 

아래는 클래스형 컴포넌트의 코드 구조입니다.

Component 를 상속받고, render() 메서드를 통해 return 문 안에 있는 JSX 코드를 반환합니다. 

class MyComponent2 extends Component {
    render() {
        return (
            <div>
                Hello React!
            </div>
        );
    }
}

 

"Reactjs Code snippet" 라이브러리가 설치되어 있다면, rcc 를 입력하면 클래스형 컴포넌트가 자동완성되는데요.

아래는 MyComponent2.js 파일에서 Hello React!를 나타내는 코드입니다.