React 함수형 컴포넌트 vs 클래스형 컴포넌트

리액트에서는 컴포넌트를 만드는 방법으로 함수형(Functional) 컴포넌트와 클래스형(Class) 컴포넌트 두 가지가 존재합니다.

최근에는 함수형 컴포넌트가 표준처럼 자리잡았지만, 여전히 클래스형 컴포넌트가 코드베이스에 존재합니다. 

 

컴포넌트 정의 방식의 차이

함수형 컴포넌트

const Hello = () => {
  return <h1>Hello, world!</h1>;
};

• function 또는 arrow function으로 정의
• this 키워드를 사용하지 않음
• Hook 사용 가능 (React 16.8 이후)

클래스형 컴포넌트

class Hello extends React.Component {
  render() {
    return <h1>Hello, world!</h1>;
  }
}

• 클래스 문법을 사용
• this.props, this.state를 사용해 데이터 접근
• 라이프사이클 메서드를 통해 생명주기 관리

 

상태(State) 관리 방식

함수형 컴포넌트 + useState

const Counter = () => {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
};

• 함수형 컴포넌트는 호출되면 바로 JSX를 반환하며, 그 반환 값이 UI로 렌더링됩니다.
• React가 이 함수를 호출하면서 내부에서 렌더링 과정을 처리하기 때문에, 클래스형 컴포넌트처럼 명시적인 render() 메서드를 구현할 필요가 없습니다.

 

클래스형 컴포넌트

class Counter extends React.Component {
  state = { count: 0 };

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

• 클래스형 컴포넌트에서는 render() 메서드가 핵심입니다.
• 이 메서드는 컴포넌트가 화면에 무엇을 보여줄지 정의하는 함수입니다.
• 즉, return 문을 통해 JSX를 반환하고, 이 JSX가 브라우저에 실제로 렌더링됩니다.
• React는 클래스형 컴포넌트가 변경되거나 초기화될 때마다 render()를 자동으로 호출해서 화면을 다시 그립니다.
• 상태(state)가 바뀌면 render()가 다시 실행되면서 변경된 UI가 반영됩니다.

 

 

라이프사이클 처리

클래스형 컴포넌트 라이프사이클 메서드

class Timer extends React.Component {
  componentDidMount() {
    console.log('컴포넌트가 마운트됨');
  }

  componentWillUnmount() {
    console.log('컴포넌트가 언마운트됨');
  }

  render() {
    return <div>타이머</div>;
  }
}

 

함수형 컴포넌트 + useEffect

useEffect(() => {
  console.log('컴포넌트가 마운트됨');
  return () => {
    console.log('컴포넌트가 언마운트됨');
  };
}, []);

 

 

사용성과 트렌드 비교

항목	함수형 컴포넌트	클래스형 컴포넌트
문법	간결하고 직관적	비교적 복잡함
상태 관리	useState, useReducer 등	this.state, setState
라이프사이클	useEffect 사용	여러 개의 메서드 사용
코드 재사용성	Custom Hook 활용	HOC, Render Props 방식
트렌드	표준처럼 사용됨	점점 사용 줄어드는 추세

 

 

어떤 걸 써야 할까?

• 새로운 프로젝트라면 무조건 함수형 컴포넌트를 사용하는 것이 좋습니다. 가독성, 유지보수, 테스트 측면에서 유리하고, 커뮤니티 및 문서도 대부분 함수형 기준입니다.
• 기존 프로젝트에서 클래스형이 사용되고 있다면 이해하고 읽을 수는 있어야 하며, 리팩토링이 필요한 시점에 함수형으로 전환하는 것을 고려할 수 있습니다.