[React] 클래스형 & 함수형 컴포넌트의 생성과 차이, 장단점

---

 

 

📑 개요

 

컴포넌트 단위의 개발...

익숙해지면 괜찮다. 익숙하지 않을 땐 익숙해지는 과정이 귀찮을지도.

 

그치만 컴포넌트 단위로 하면 확실히 보기도 편하고 수정도 편해서 안 쓸 수가 없다.

처음에는 함수명으로 컴포넌트를 만드는 게 엄청 낯설게 느껴졌지만 지금은 너무나 편한 방식...!

 

자... 컴포넌트도 알아보러 가자🤗

 

 

 

---

 

 

 

 

🧶 Component 란?

특정 기능을 수행하는 작은 코드로 리액트로 만들어진 앱을 이루는 최소한의 단위이다.

컴포넌트 이름은 항상 대문자로 시작해야한다.

 

 

엄청 중요해 보이지 않는 내용인데 빨간 글씨로 한 이유...?

별 거 없다...

그냥 내가 코드 짤 때 오류가 났는데 왜 났지 하면서 헤맨 시간이 꽤 있다가 저걸 깨닫고 허망함에 눈물을 머금어서...

프로젝트를 시작할 여러분들은 그런 일이 없길 바라며.......😂

 

 

 

- 엘리먼트(Element)와 컴포넌트(Component)의 차이

Element

• React를 구성하는 가장 작은 단위로 Virtual DOM에서 실제 DOM 노드를 나타낸다.
• React를 렌더링하는데 사용되며 React element는 JSX로 표현된다.

const element = <div>Hello, World!</div>;

 

 

Component

• 재사용 가능한 UI 조각으로 자체적으로 독립적 기능을 수행하며 화면에서 특정 부분을 나타낸다.
• 코드의 재사용성과 유지보수성이 높아지고 복잡한 UI 관리가 쉬워진다.

// 함수형 컴포넌트 예시
function Hello() {
  return <div>Hello, World!</div>;
}

 

 

엘리먼트는 UI의 작은 조각으로 React의 구성요소를 나타내고,

컴포넌트는 이러한 엘리먼트들을 구성하여 재사용 가능한 UI 조각을 만드는 도구이다.

 

 

 

 

 

 

- Component를 생성하는 방법

컴포넌트를 생성하는 방법에는 두 가지가 있다.

1. 클래스형 컴포넌트
2. 함수형 컴포넌트

함수형 컴포넌트는 단순히 JSX를 반환하는 JavaScript 함수이며,

클래스형 컴포넌트는 React.Component 클래스를 확장한 JavaScript 클래스이다.

클래스형 컴포넌트의 경우 현재 많이 사용하고 있지는 않으나, 이전 프로젝트의 유지보수를 위해 알아두어야 한다.

 

 

 

 

---

 

 

 

 

🧩 Class Component와 Functional Component

 

- 클래스형 컴포넌트(Class Component)

상태 관리나 라이프사이클 메서드가 필요한 경우 사용되며 React.Component 클래스를 상속받아서 만든다.

 

 

- 함수형 컴포넌트(Functional Component)

함수를 사용하여 정의되며 간단한 UI를 만들거나 상태 관리가 필요하지 않을 때 사용된다.

React 패키지에서 createElement 함수를 호출하지 않아도 된다.

 

 

이제 이 둘의 차이점을 예시와 함께 알아보자.

 

 

 

 

---

 

 

 

 

♦ Class Component와 Functional Component의 차이

 

- 선언 방식

 

클래스형 컴포넌트 (Class Component)

1. class 키워드가 필요하다.
2. Component를 상속받아야 한다.
3. 화면에 표시하기 위한 render() 메서드가 반드시 필요하다.

import React, { Component } from 'react';

class MyClassComponent extends Component {
  render() {
    const { name } = this.props;
    return <div>나는 {name}!</div>;
  }
}

export default MyClassComponent;

 

 

 

함수형 컴포넌트 (Functional Component)

1. 클래스형보다 간단한 코드를 작성할 수 있다.
2. Component의 상속이 필요하지 않다.
3. 함수 자체가 렌더 함수이므로 render() 메서드를 쓰지 않아도 된다.

기본 함수 방식과 화살표 방식 두 가지로 구현 가능하다.

import React from 'react';

function MyFunctionalComponent(props) {
  const { name } = props;
  return <div>나는 {name}!</div>;
}

export default MyFunctionalComponent;

import React from 'react';

const MyFunctionalComponent = (props) => {
  const { name } = props;
  return <div>나는 {name}!</div>;
}

export default MyFunctionalComponent;

 

 

 

 

- State 사용 방식

클래스형 컴포넌트 (Class Component)

1. 상태(State)를 관리하기 위해 this.state를 사용한다.
2. constructor 메서드에서 초기 상태를 설정하고, 상태를 업데이트할 때에는 this.setState() 메서드를 사용한다.

import React, { Component } from 'react';

class MyClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

 

 

함수형 컴포넌트 (Functional Component)

1. React Hooks 중 하나인 useState를 사용하여 상태를 관리한다.
2. useState 훅을 사용하여 상태를 정의하고, 반환된 상태와 업데이트 함수를 사용하여 상태를 업데이트한다.

import React, { useState } from 'react';

function MyFunctionalComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

 

 

 

 

- Props 사용 방식

클래스형 컴포넌트 (Class Component)

1. this.props를 통해 부모 컴포넌트로부터 전달된 props를 참조한다.

import React, { Component } from 'react';

class MyClassComponent extends Component {
  render() {
    return <div>My name is {this.props.name}.</div>;
  }
}

 

 

 

함수형 컴포넌트 (Functional Component)

1. 함수의 매개변수로 props를 받아와서 사용한다.

import React from 'react';

function MyFunctionalComponent(props) {
  return <div>My name is {props.name}.</div>;
}

 

 

 

 

- 이벤트 핸들링 차이

클래스형 컴포넌트 (Class Component)

1. handleClick 메서드를 정의하고, 해당 메서드를 이벤트 핸들러로 사용한다.
2. 메서드 적용 시 this를 붙여야 한다.

import React, { Component } from 'react';

class MyClassComponent extends Component {
  handleClick = () => {
    console.log('Button clicked');
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

 

 

 

함수형 컴포넌트 (Functional Component)

1. handleClick 함수를 정의하고, 해당 함수를 이벤트 핸들러로 사용한다.
2. 함수 적용 시 this를 붙이지 않아도 된다.

import React from 'react';

function MyFunctionalComponent() {
  const handleClick = () => {
    console.log('Button clicked');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

 

 

 

- LifeCycle 차이

React 컴포넌트는 생명주기를 갖고 있는데 이를 라이프사이클이라고 한다.

컴포넌트가 실행되거나 업데이트, 제거될 때 특정 이벤트가 발생한다.

컴포넌트는 생성(Mounting) -> 업데이트(Updating) -> 제거(Unmounting)의 생명주기를 갖는다.

 

 

클래스형 컴포넌트 (Class Component)

1. LifeCycle API를 사용한다.

 

함수형 컴포넌트 (Functional Component)

1. React Hook을 사용한다.

 

 

자세한 내용은 LifeCycle과 LifeCycle 메서드 포스팅 참고

 

 

 

 

🔗 클래스형 컴포넌트와 함수형 컴포넌트의 장단점

 

- 클래스형 컴포넌트의 장단점

장점

1. 라이프사이클 메서드를 사용하여 라이프사이클 관리가 쉽다.
2. 개발자가 객체 지향 프로그래밍 패러다임에 익숙하다면 this 키워드의 코드 작성이 편하다.

단점

1. this 키워드와 라이프사이클 메서드 사용으로 함수형 컴포넌트에 비해 코드가 길고 복잡하며 가독성이 떨어질 수 있다.
2. 인스턴스 생성 과정이 필요해 불필요한 메서드와 속성이 포함될 수 있어 함수형 컴포넌트에 비해 성능이 떨어질 수 있다.

 

 

- 함수형 컴포넌트의 장단점

장점

1. 함수로만 이루어져 있어 코드가 간결하고 가독성이 좋으며 재사용성이 높다.
2. 컴포넌트 상태 변화 없이 props와 함수를 입력 받아 화면을 그리므로 선언형 프로그래밍에 더 적합하다.
3. 인스턴스 생성 과정이 없어 메모리 사용량이 줄어들고 렌더링 성능이 비교적 좋다.
4. React Hook을 통해 라이프사이클 메서드와 같은 기능의 구현이 가능하며 상태 관리가 간편해졌다.

단점

1. 기존 라이프사이클 메서드를 사용할 수 없다.
2. 클래스형 컴포넌트보다 라이프사이클 관리가 복잡할 수 있다.

 

 

 

---

 

 

 

✨ 마무리

class형은 나도 이번에 제대로 봤다......

냅다 함수형으로 썼기 때문에........... 이래서 CS 공부하지...............

나중에 유지보수에 필요할 수도 있다고 하니 둘 다 잘 알아두자

 

 

- 요약

• 컴포넌트의 생성 방법
  
  1. 클래스형 컴포넌트
     상태 관리나 라이프사이클 메서드가 필요한 경우 사용되며 React.Component 클래스를 상속받아서 만든다.
  2. 함수형 컴포넌트
     함수를 사용하여 정의되며 간단한 UI를 만들거나 상태 관리가 필요하지 않을 때 사용된다.
• 함수형 컴포넌트와 클래스형 컴포넌트의 차이점
  
  1. 선언 방식
  2. State 사용 방식
  3. Props 사용 방식
  4. 이벤트 핸들링 차이
  5. LifeCycle 차이