React에서 컴포넌트를 만드는 방식은 함수형 컴포넌트와 클래스형 컴포넌트 두 가지로 나눌 수 있습니다. 최근 React에서는 함수형 컴포넌트와 Hooks를 주로 사용하지만, 클래스형 컴포넌트 역시 여전히 많은 프로젝트에서 사용됩니다. 이번 블로그 글에서는 함수형 컴포넌트와 클래스형 컴포넌트를 비교하며 각 방식의 차이점, 장단점, 그리고 사용 사례에 대해 살펴보겠습니다.
1. 함수형 컴포넌트란?
함수형 컴포넌트는 간단하게 함수로 정의되며, JSX를 반환하는 구조입니다. 상태를 관리하거나 생명주기 메서드를 사용하기 위해 React의 Hooks를 활용할 수 있습니다. 최신 React 애플리케이션에서는 주로 함수형 컴포넌트가 사용되고 있습니다.
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default Counter;함수형 컴포넌트의 주요 특징
- 간결함: 함수형 컴포넌트는 코드가 간단하고 선언적입니다.
- Hooks 사용: useState, useEffect 등과 같은 Hooks를 사용해 상태 관리 및 생명주기와 유사한 기능을 처리할 수 있습니다.
- 가벼움: 클래스형 컴포넌트보다 메모리 측면에서 더 효율적입니다.
2. 클래스형 컴포넌트란?
클래스형 컴포넌트는 class 키워드를 사용해 정의되며, state와 생명주기 메서드(componentDidMount, componentDidUpdate 등)를 통해 컴포넌트의 상태와 행동을 관리합니다. 함수형 컴포넌트보다 문법이 복잡하지만, React의 초기부터 사용된 방식입니다.
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<h1>Count: {this.state.count}</h1>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
export default Counter;클래스형 컴포넌트의 주요 특징
- 클래스 사용: ES6 class 문법을 사용하여 정의됩니다.
- 생명주기 메서드: 컴포넌트가 마운트되거나 업데이트될 때 실행되는 생명주기 메서드를 제공합니다.
- this 사용: 클래스 컴포넌트에서는 this 키워드를 사용해 상태나 메서드에 접근해야 합니다.
3. 함수형 컴포넌트와 클래스형 컴포넌트 비교
항목함수형 컴포넌트클래스형 컴포넌트
| 정의 방식 | 함수로 정의 | class로 정의 |
| 상태 관리 | useState와 같은 Hooks를 사용 | this.state와 setState() 사용 |
| 생명주기 관리 | useEffect를 통해 생명주기 관리 가능 | componentDidMount, componentDidUpdate 등 생명주기 메서드 사용 |
| 코드 구조 | 간결하고 선언적 | 상대적으로 복잡하고 명령적 |
| this 사용 | 필요 없음 | this로 상태 및 메서드에 접근 |
| Hooks 지원 | 완벽히 지원 (useState, useEffect 등) | Hooks 사용 불가 |
1) 코드의 간결성
함수형 컴포넌트는 함수로 정의되고 Hooks를 통해 상태나 생명주기 메서드를 쉽게 사용할 수 있어 코드가 더 간결합니다. 클래스형 컴포넌트는 constructor, this 키워드를 사용해야 해서 더 복잡한 구조를 가집니다.
2) 생명주기 관리
클래스형 컴포넌트는 생명주기 메서드를 사용해 컴포넌트의 마운트, 업데이트, 언마운트 등의 시점에 특정 동작을 정의할 수 있습니다. 함수형 컴포넌트에서는 useEffect 훅을 사용해 이와 같은 기능을 구현할 수 있습니다.
클래스형 컴포넌트의 생명주기 메서드 예시
class MyComponent extends React.Component {
componentDidMount() {
console.log('Component mounted');
}
componentDidUpdate(prevProps, prevState) {
console.log('Component updated');
}
render() {
return <div>My Component</div>;
}
}
함수형 컴포넌트에서 useEffect를 이용한 생명주기 관리
import React, { useEffect } from 'react';
const MyComponent = () => {
useEffect(() => {
console.log('Component mounted or updated');
});
return <div>My Component</div>;
};3) Hooks의 등장
Hooks의 도입으로 함수형 컴포넌트가 더욱 강력해졌습니다. 이전에는 클래스형 컴포넌트에서만 상태 관리 및 생명주기 메서드를 사용할 수 있었지만, Hooks 덕분에 함수형 컴포넌트에서도 이를 사용할 수 있게 되어 함수형 컴포넌트가 더 선호되고 있습니다.
4. 결론: 언제 어떤 컴포넌트를 사용해야 할까?
클래스형 컴포넌트는 기존 코드나 레거시 프로젝트에서 많이 사용되며, 아직도 유지보수가 필요할 때 유용할 수 있습니다. 하지만 새롭게 프로젝트를 시작한다면, 함수형 컴포넌트와 Hooks를 사용하는 것이 더 효율적입니다.
- 레거시 코드: 기존에 클래스형 컴포넌트를 많이 사용해온 프로젝트라면 유지보수 차원에서 클래스를 계속 사용해야 할 수도 있습니다.
- 새 프로젝트: 최신 기능을 활용하고 더 간결한 코드를 작성하고 싶다면 함수형 컴포넌트와 Hooks를 사용하는 것이 좋습니다.
React의 방향성은 함수형 컴포넌트에 무게를 두고 발전하고 있으므로, 앞으로는 함수형 컴포넌트가 기본 선택지가 될 것입니다.
