[react] 함수형 컴포넌트와 클래스형 컴포넌트

 

chatGPT 함수형 vs 클래스형

 

hmlt, css, javaScript로만 페이지를 구성할 때 불편한 점을 많이 느꼈었다.

바로 페이지마다 반복되는 코드가 너무 많다는 것!

헤더, 푸터, 헤드 태그, 메타 태그 등 이걸 하나로 관리할 수 있으면 너무 좋을 텐데 하나로 수정되면 전체 페이지의 코드를 수정해야 하는게 너무나 불편했었다. 물론 옛날 프론트, 벡엔드 나누지 않았던 시절에는 서버로직으로 처리가 가능했다.

리액트 컴포넌트 개념을 알고나서부터 재활용 가능한 ui를 만들 수 있기에 너무나 편리한 도구임을 깨닫게 되었다.

하나의 압축된? 코드로 표현할 수 있다는 그 쾌감.. 컴포넌트에 대해서 알아보자

 

목차

1. 컴포넌트란 무엇인가?
2. 함수형 컴포넌트 (Function Component)
3. 클래스형 컴포넌트 (Class Component)
4. 함수형 vs 클래스형 비교
5. 마무리 요약

 

1. 컴포넌트란 무엇인가?

리액트 공식문서를 보면 컴포넌트에 대한 내용을 아래와 같이 정의하고 있다.

React를 사용하면 마크업, CSS, JavaScript를 앱의 재사용 가능한 UI 요소인 사용자 정의 “컴포넌트”로 결합할 수 있습니다.
React 컴포넌트는 마크업으로 뿌릴 수 있는 JavaScript 함수입니다.

 

리액트를 사용하게 되면 javaScript에서 사용했던 createElement라던지 append 함수와 같은 것을 사용하지 않더라도 jsx문법으로 비교적 쉽게 컴포넌트화 하여 사용할 수 있다.

 

그래서 리액트 웹앱 내부에서 ui를 분할하고 재사용할 수 있는 단위라고 정리해볼 수 있을 것 같다.

 

2. 함수형 컴포넌트 (Function Component)

import React from "react";

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// ES6 화살표 함수 형태
const Greeting = ({ name }) =>
  <h1>Hello, {name}!</h1>;

export default Greeting;

 

- 리액트에서 함수형태로 컴포넌트를 만들면 위와 같은 형태가 된다.

- 함수를 선언하고 내부에서 jsx문법을 리턴해주는 방식이다.

- 아래에서 정리해볼 class 문법보다 간결한 느낌이며 요즘엔 다 함수형 컴포넌트로 컴포넌트를 제작한다고 한다.

 

 

3. 클래스 컴포넌트 (Class Component)

import React, { Component } from "react";

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Greeting;

 

- 클래스 컴포넌트는 React.Component로 부터 상속을 받아 컴포넌트를 선언한다.

- render() 메서드 내에서 jsx를 return 한다.

 

 

4. 함수형 vs 클래스형 비교

위에서 함수형 컴포넌트와 클래스 컴포넌트에 대해서 간략하게 정리해보았습니다.

형태만 보더라도 차이점이 존재하는데요 차이점에 대해 더 상세히 나열해보겠습니다.

 

1) 컴포넌트 선언 방식

- 함수형의 경우 function MyComponent(props) 또는 const MyComponent = (props) = {} 함수형태로 선언이 된다.

- 클래스의 경우 class MyComponent extends React.Component 형태로 작성되고 render() 메서드가 있어야한다.

 

 

2) props 와 state 처리방식

- 함수형 props의 경우 props.foo 또는 구조 분해 ({ foo }) 로 접근하고 state는 const [state, setState] = useState()로 생성한다.

- 클래스 props의 경우 this.props.foo로 접근하고 state는 constructor this.state ={} 로 생성한다.

 

 

3) this 키워드 사용 유무

- 함수형의 경우 props를 인자로 받아 사용하고, useState로 state를 관리하기 때문에 this를 사용하지 않아도 된다.

- 클래스의 경우 this를 통해 props, state, 메서드에 접근해야한다.

 

 

4) 생명주기 처리 방식

- 함수형의 경우 라이프사이클 메서드는 없고 useEffect 훅을 사용한다.

useEffect(() => {
  // Mount 혹은 의존성 변경 시 동작
  return () => {
    // Cleanup (Unmount 혹은 다음 useEffect 전)
  };
}, [ 의존성 배열 ]);

- useEffect 훅으로 생애주기를 처리할 수 있는데 의존성 배열과 cleanup 함수가 존재한다.

- 의존성 배열이 빈 배열일 경우 첫 마운트 되었을 때 한 번만 실행하게 된다. 다른 state값이 존재한다면 해당 state값이 변경될 때마다 실행된다.

- cleanup 함수는 언마운트 시 또는 다음 effect 실행전에 실행되고 마운트 시 실행된 setInterval 함수나 이벤트와 같이 메모리상에 계속 남아있는 작업들을 해제해주는 역할을 담당한다.

 

- 클래스형의 경우 생명 주기 메서드를 제공한다.

componentDidMount : mount 시 한 번만 실행

componentDidUpdate : props 변경 시 실행

componentWillUnmount : 타이머 해제, 이벤트 제거, 네트워크 요청 취소 등의 작업으로 사용

* 더 많은 메서드들이 있으나 주요 메서드만 정리했습니다.

 

 

5. 정리

- 함수형 컴포넌트는 비교적 문법이 간결하고 쉬우며 useEffect, useState를 이용하여 상태를 관리하고 생명주기를 설정한다.

- 클래스 컴포넌트는 this, 생명주기 메서드들이 존재하지만 현재 새 프로젝트에는 쓰이지 않으며 레거시 코드 유지보수 등에서 볼 수 있다.

 

여기까지 함수형 컴포넌트와 클래스 컴포넌트를 정리해보았다.

아직 클래스 컴포넌트를 접해보진 않았지만 실제로 직면하게 되더라도  정리한 내용이 있기에 완전 낯설지는 않을 것이다.

 

 

 

---

 

참고문서

https://ko.react.dev/learn/your-first-component

첫 번째 컴포넌트 – React

https://ko.legacy.reactjs.org/docs/components-and-props.html

Components와 Props – React

https://yong-nyong.tistory.com/78

[React] 함수(Function) 컴포넌트 vs 클래스(Class) 컴포넌트 차이가 뭘까요?