[React] 재사용가능한 Component

예진·2023년 6월 13일

리액트는 화면에서 UI 요소를 구분할 때 Component라는 단위를 사용한다. 컴포넌트는 리액트 앱을 이루는 최소한의 단위라고 할 수 있고, 레고 블록으로 집을 만든다고 가정했을 때, 하나의 블록을 컴포넌트라고 할 수 있다. 컴포넌트는 새로운 컴포넌트를 생성할 수 도 있고, MVC((모델-뷰-컨트롤러) 의 뷰를 독립적으로 구성하여 재사용할 수 있다. 리액트의 중요한 핵심인 컴포넌트는함수 컴포넌트, 클래스 컴포넌트 로 구현이 가능하다.

컴포넌트 구성 요소

1) property(props)

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

2) state

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

3) context

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

컴포넌트 생성 규칙

1) component 작명할 때 첫 글자는 영어대문자로 작명.

2) return () 안엔 html 태그들이 평행하게 여러 개 들어갈 수 없다.

3) function App(){} 내부에서 만들지 않는다.
(component 안에 component 를 만들지 않음.)

함수(Function) 컴포넌트

✍🏻 함수 컴포넌트란?

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

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

화살표 문법으로도 표현 가능


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

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

Tip❗️
컴포넌트는 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>
        );
    }
}