함수형 컴포넌트, 클래스형 컴포넌트 차이점

리액트에서 컴포넌트를 만드는 데에는 두 가지 방법이 있습니다. 각각 함수형 컴포넌트와 클래스형 컴포넌트로 불리는데 오늘은 두가지 컴포넌트들의 특징과 장단점을 살펴보며, 어떤 상황에서 어떤 컴포넌트를 선택해야 하는지 알아보겠습니다.

선언 방법

• 클래스형 컴포넌트는 React.Component를 상속 받아 생성합니다. render() 메서드를 사용하여 JSX를 반환하는 방식으로 컴포넌트의 렌더링을 정의합니다.

class ClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 초기 상태
    };
  }

  render() {
    return (
      <div>
        {/* JSX */}
      </div>
    );
  }
}

• 함수형 컴포넌트는 함수로 정의되며 React.FC (함수형 컴포넌트 타입) 혹은 일반 함수로 작성할 수 있습니다. JSX를 반환하여 컴포넌트의 렌더링을 정의합니다.

import React, { useState, useEffect } from 'react';

const FunctionalComponent = () => {
  const [state, setState] = useState(initialState);

  return (
    <div>
      {/* JSX */}
    </div>
  );
};

상태 관리

• 클래스형 컴포넌트는 this.state 멤버변수와 this.setState 메서드로 상태관리를 합니다.

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    // 초기 상태 설정
    this.state = {
      count: 0,
    };
  }

  // 버튼 클릭 시 호출되는 메서드
  handleClick = () => {
    // 현재 상태를 가져와서 count를 1 증가시킨 후 업데이트
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  render() {
    // 렌더링 시 현재 count 상태를 보여주는 버튼 생성
    return (
      <div>
        <p>클릭 횟수: {this.state.count}</p>
        <button onClick={this.handleClick}>클릭하기</button>
      </div>
    );
  }
}

export default Counter;

• 함수형 컴포넌트는 useState라는 훅을 가져와서 상태를 관리합니다.

import React, { useState } from 'react';

const FunctionalCounter = () => {
  // useState 훅을 사용하여 count 상태와 업데이트 함수를 가져옴
  const [count, setCount] = useState(0);

  // 버튼 클릭 시 count 상태를 업데이트하는 함수
  const handleClick = () => {
    setCount(count + 1);
  };

  // 렌더링 시 현재 count 상태를 보여주는 UI를 생성
  return (
    <div>
      <p>클릭 횟수: {count}</p>
      <button onClick={handleClick}>클릭하기</button>
    </div>
  );
};

export default FunctionalCounter;

라이프 사이클

• 클래스형 컴포넌트는 라이프사이클을 componentDidMount나 componentDidUpdate와 같은 생명주기 메서드를 이용하여 제어할 수 있습니다.

class ClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 초기 상태
    };
  }

  componentDidMount() {
    // 컴포넌트가 마운트된 후 실행되는 로직
  }

  componentDidUpdate(prevProps, prevState) {
    // 컴포넌트가 업데이트된 후 실행되는 로직
  }

  render() {
    return (
      <div>
        {/* JSX */}
      </div>
    );
  }
}

• 함수형 컴포넌트는 useEffect 훅을 이용하여 라이프 사이클을 제어할 수 있습니다.

import React, { useState, useEffect } from 'react';

const FunctionalComponentWithHooks = () => {
  const [state, setState] = useState(initialState);

  useEffect(() => {
    // 생명주기 메서드 역할
    return () => {
      // 컴포넌트가 업데이트된 후 실행되는 로직 주로 자원의 반환
    };
  }, [dependencies]);

  return (
    <div>
      {/* JSX */}
    </div>
  );
};

결론

함수형 컴포넌트와 클래스형 컴포넌트는 각각의 특징과 장단점을 가지고 있습니다. 최근에는 함수형 컴포넌트와 Hooks를 주로 사용하는 추세이며, 함수형 프로그래밍의 장점과 리액트의 진화에 따라 함수형 컴포넌트가 더 많이 활용되고 있습니다. 개발자는 상황에 따라 적절한 컴포넌트 형식을 선택하여 사용해야 합니다.