본문 바로가기
React

7. 함수형 컴포넌트와 클래스형 컴포넌트 - 1

by leo2114 2024. 2. 18.
반응형

함수형 컴포넌트의 장단점과 사용법

React에서 함수형 컴포넌트는 클래스형 컴포넌트와 함께 컴포넌트를 정의하는 주요 방법 중 하나입니다. 이번 포스트에서는 함수형 컴포넌트의 장단점과 사용법에 대해 알아보겠습니다.

함수형 컴포넌트의 개요

함수형 컴포넌트는 단순히 JavaScript 함수로 구성되어 있으며, 주어진 Props를 받아 UI를 렌더링하는 역할을 합니다. 다음은 함수형 컴포넌트의 기본적인 구조입니다.

import React from 'react';

const MyComponent = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
};

export default MyComponent;

함수형 컴포넌트의 장단점

장점

  1. 간결함: 클래스형 컴포넌트보다 코드가 간결하고 읽기 쉽습니다.
  2. 재사용성: 함수형 컴포넌트는 순수 JavaScript 함수이므로 다른 컴포넌트에서 쉽게 재사용할 수 있습니다.
  3. 테스트 용이성: 부수 효과(side effect)가 없는 순수 함수로 구성되어 있기 때문에 테스트하기 쉽습니다.
  4. 성능: 최근 React의 업데이트로 인해 함수형 컴포넌트의 성능이 클래스형 컴포넌트와 비슷해졌습니다.

단점

  1. State와 Lifecycle 메서드 사용의 제한: 함수형 컴포넌트는 상태(state)나 라이프사이클 메서드를 직접적으로 사용할 수 없습니다. 하지만 React Hooks를 이용하면 이러한 제한을 극복할 수 있습니다.

함수형 컴포넌트의 사용법

함수형 컴포넌트는 다음과 같은 상황에서 유용하게 사용될 수 있습니다.

  1. 단순한 UI 컴포넌트: 상태나 라이프사이클 메서드가 필요 없는 단순한 UI를 렌더링할 때 사용됩니다.
  2. 상태 관리가 필요한 컴포넌트: React Hooks를 이용하여 함수형 컴포넌트에서도 상태를 관리할 수 있습니다.
  3. 하위 컴포넌트: 다른 컴포넌트에서 재사용되는 작은 UI 컴포넌트를 만들 때 사용됩니다.

마무리

함수형 컴포넌트는 React의 발전과 함께 많은 개발자들에게 선호되는 방식으로 자리 잡고 있습니다. 간결하고 테스트하기 쉬운 코드를 작성하고자 한다면 함수형 컴포넌트를 적극적으로 활용하는 것이 좋습니다. 이러한 장점과 함께 React Hooks를 이용하면 함수형 컴포넌트에서도 상태와 라이프사이클을 관리할 수 있어서 더욱 효율적인 개발이 가능합니다.

 
 
반응형