[React] 함수형 컴포넌트, 클래스형 컴포넌트

 

 

1. 컴포넌트(Component)

컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로,

UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체이다.

선언체란 컴포넌트를 생성하고 보이고자 하는 UI 요소를 컴포넌트 내부에서 JSX를 통해 선언하면 이것을 React가 화면에서 그려주는데, 이를 통해 리액트 컴포넌트가 선언체라는 것을 알 수 있다.

---

2. 컴포넌트 종류

1) 함수형 컴포넌트 (function component)

function 으로 정의하고, return 문에 jsx 코드를 반환한다.

import React from "react";
import "./App.css";

function Test() {
  const name = "test";
  return <div>{name}</div>;
}

export default Test;

 

이때 함수형 컴포넌트는 function을 사용하지 않고 화살표 함수로 정의해도 된다.

import React from "react";
import "./App.css";

const Test = () => {
  const name = "test";
  return <div>{name}</div>;
};

export default Test;

 

2) 클래스형 컴포넌트 (class component)

class로 정의하고 render() 함수에서 jsx 코드를 반환한다.

import React, { Component } from "react";

class Test extends Component {
  render() {
    const name = "react";
    return <div className="react">{name}</div>;
  }
}

export default Test;

 

클래스형 컴포넌트에서는 state(상태)를 사용할 수 있으며, 각종 라이프사이클 및 메서드를 이용하여 컴포넌트가 마운트나 언마운트 될 때 추가 작업을 수행시키는 등 조작을 할 수 있었다.

하지만 Hook이 등장한 이후부터는 위 기능들을 함수형 컴포넌트에서도 대부분 구현이 가능하게 도이ㅓㅆ다.

 

 

주의

•  컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만들어야 한다.
• 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 지어야 한다.

---

3. 기능적 차이

 

1) 클래스형 컴포넌트

1. state와 lifecycle(라이프사이클) 관련 기능 사용이 가능하다.
2. 메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.
3. 임의 메서드를 정의할 수 있다.

 

2) 함수형 컴포넌트

1. state, lifecycle 관련 기능 사용 불가능 (Hook을 통해 해결 가능)
2. 메모리 자원을 클래스형 컴포넌트보다 덜 사용한다.

 

---

Hooks 이란?

리액트 v16.8로 업데이트 되면서 추가된 기능으로, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공한다. (기존의 함수형 컴포넌트에서 할 수 없었던 작업이다.)

 

 

 

---

참조 

https://chanhuiseok.github.io/posts/react-4/

https://seons-dev.tistory.com/entry/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%95%A8%EC%88%98%ED%98%95-%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95

https://velog.io/@solmii/React%EC%9D%98-%ED%95%A8%EC%88%98%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-feat.Hooks

https://heeeming.tistory.com/entry/React-%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-vs-%ED%95%A8%EC%88%98%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%B0%A8%EC%9D%B4-class-vs-function-component