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

1. 기본 구문 차이

클래스형 컴포넌트

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }
  
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>증가</button>
      </div>
    );
  }
}

함수형 컴포넌트

import React, { useState } from 'react';

function Counter(props) {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(count + 1);
  };
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>증가</button>
    </div>
  );
}

2. 상태 관리

클래스형 컴포넌트

• this.state로 상태 초기화
• this.setState()로 상태 업데이트
• 상태 업데이트 시 객체 병합 방식
• 비동기적 업데이트를 위해 콜백 함수 사용

함수형 컴포넌트

• useState Hook으로 상태 관리
• 상태별로 독립적인 상태 변수 선언 가능
• 상태 업데이트 함수가 이전 상태를 완전히 대체
• 함수형 업데이트로 비동기 처리 (setCount(prev => prev + 1))

3. 생명주기 관리

클래스형 컴포넌트

• componentDidMount: 마운트 후 호출
• componentDidUpdate: 업데이트 후 호출
• componentWillUnmount: 언마운트 전 호출
• shouldComponentUpdate: 렌더링 최적화
• static getDerivedStateFromProps: props로부터 state 도출
• getSnapshotBeforeUpdate: DOM 변경 직전 정보 캡처

함수형 컴포넌트

• useEffect: 여러 생명주기 메서드 대체
  • 의존성 배열 없음: 모든 렌더링 후 실행
  • 빈 배열: componentDidMount와 유사
  • 의존성 포함: 특정 값 변경 시 실행
• useLayoutEffect: DOM 변경 후, 브라우저 페인팅 전 실행
• useCallback, useMemo: 성능 최적화
• useRef: DOM 요소 참조 및 값 보존

4. 성능 및 최적화

클래스형 컴포넌트

• PureComponent로 얕은 비교 최적화
• shouldComponentUpdate로 세밀한 렌더링 제어
• componentDidUpdate에서 조건부 로직 필요

함수형 컴포넌트

• React.memo로 컴포넌트 메모이제이션
• useMemo로 계산 결과 캐싱
• useCallback으로 함수 인스턴스 유지
• 의존성 배열로 효과 최적화

5. 에러 처리

클래스형 컴포넌트

• componentDidCatch와 static getDerivedStateFromError로 에러 경계 구현 가능

함수형 컴포넌트

• 에러 경계 직접 구현 불가 (클래스형 에러 경계 컴포넌트 필요)
• React 18부터 useErrorBoundary Hook 도입 예정

6. Context 접근

클래스형 컴포넌트

• static contextType으로 단일 컨텍스트 접근
• 여러 컨텍스트는 Consumer 컴포넌트 중첩 필요

함수형 컴포넌트

• useContext Hook으로 간편하게 여러 컨텍스트 접근 가능

7. 코드 구성 및 재사용성

클래스형 컴포넌트

• HOC(고차 컴포넌트) 패턴
• Render Props 패턴
• 믹스인(deprecated)

함수형 컴포넌트

• 사용자 정의 Hook으로 로직 재사용
• 컴포지션 패턴 활용
• 더 작고 집중된 컴포넌트 구성 용이

8. 테스트 용이성

클래스형 컴포넌트

• 인스턴스 메서드 직접 테스트 가능
• 생명주기 메서드 모킹 복잡

함수형 컴포넌트

• 순수 함수 테스트 용이
• Hook 테스트를 위한 특수 도구 필요
• React Testing Library와 호환성 좋음

9. 최신 React 기능 지원

클래스형 컴포넌트

• Concurrent Mode 부분 지원
• Suspense 제한적 지원

함수형 컴포넌트

• 모든 최신 React 기능 완전 지원
• Concurrent Mode, Suspense 최적화
• Server Components 지원