클래스 컴포넌트와 함수형 컴포넌트의 차이점은 무엇인가요?

리액트 컴포넌트는 클래스로도, 함수로도 만들 수 있습니다. 두 방식 모두 props를 받아 UI를 반환하지만, 상태와 생명주기를 다루는 방법이 다릅니다. 리액트 16.8에서 훅이 도입된 이후로는 함수형 컴포넌트가 표준입니다.

클래스 컴포넌트

React.Component를 상속하고 render()에서 UI를 반환합니다. 상태는 this.state, 갱신은 this.setState, 사이클은 componentDidMount 같은 생명주기 메서드로 다룹니다.

class Counter extends React.Component {
  state = { count: 0 };
 
  componentDidMount() {
    console.log('마운트됨');
  }
 
  render() {
    return <button onClick={() => this.setState({ count: this.state.count + 1 })}>{this.state.count}</button>;
  }
}

이벤트 핸들러에서 this가 어긋나기 쉬워, 바인딩하거나 화살표 함수를 써야 하는 번거로움이 있습니다.

함수형 컴포넌트

평범한 함수로 작성하고, 상태와 효과는 훅으로 다룹니다. this가 없어 더 간결합니다.

function Counter() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    console.log('마운트됨');
  }, []);
 
  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
}

핵심 차이 정리

생명주기 메서드는 “마운트/업데이트/언마운트” 시점별로 나뉘지만, useEffect는 동기화해야 할 값(의존성) 중심으로 사고한다는 점이 사고방식의 큰 차이입니다.