React Hook의 등장 이후, 클래스 컴포넌트를 쓰는 경우가 많이 줄었고 일부 리액트 초심자의 경우 아예 클래스형 컴포넌트를 배우지 않는 경우가 있다고 한다. 물론, 리액트팀에서도 함수형 컴포넌트가 리액트의 본질에 보다 가까운 방식이라고는 하였지만 어찌되었던 훅 등장 이전에 리액트 생태계의 주류였던 클래스 컴포넌트를 아는 것은 훅 등장 배경을 이해하고 함수형 컴포넌트의 장점을 되려 생각해볼 수 있는 기회이다.
그래서, 이번 글에서는 클래스 컴포넌트의 문법을 중심으로 소개하며 함수형 컴포넌트와 어떤 차이가 있는지 소개하고자 한다.
차이점 1. 선언방식의 차이
class App extends Component {
render() {
...
}
}- extends Component를 붙여서 클래스 선언을 해주면 된다.
- render() 메서드가 필수적으로 존재해야 한다.
- 클래스문법을 활용하기 때문에 this 바인딩이 필요하다. 하지만 화살표 함수를 활용한다면 this 바인딩을 따로 해주지 않아도 돼서 편리하다.
차이점 2. state와 생명주기 메서드의 사용 (그러나, 현재는 Hook을 통해 함수형 컴포넌트도 사용 가능. )
class ClassComponent extends Component {
state = { count: 0 }
increase = () => {
this.setState(({ count }) => ({ count: count + 1 })
}
render() {
<div>
<p>count: {this.state.count}</p>
<button onClick={this.increase}>INCREASE</button>
</div>
)
}
}클래스 컴포넌트에서의 state는 객체 형식이다. render 메서드에서 이 state를 사용하려면 this.state로 불러와야한다.
이제는 너무나 자연스럽게 쓰는 useState는 존재하지 않았었고, 오로지 클래스형 컴포넌트에서만 사용할 수 있었다.
생명주기에 따라 실행하고 싶은 코드를 실행하는, 생명주기 메서드도 오직 클래스형 컴포넌트에서만 사용할 수 있었다. (마찬가지로, 훅 등장 이후 useEffect를 통해 훨씬 복잡성을 줄이면서 함수형 컴포넌트에서 사용할 수 있게 되었다. )
차이점 3. 이벤트 핸들링
class ClassComponent extends Component {
state = { count: 0 }
increase = () => {
this.setState(({ count }) => ({ count: count + 1 })
}
render() {
return(
...
<button onClick={this.increase}>
INCREASE
</button>
...
)클래스형 컴포넌트에서 이벤트 핸들러를 DOM요소에 적용 시 this.을 붙여줘야 한다.
차이점 4. props 사용 방법
class App extends Component {
render () {
const {name, age} = this.props;
return (
<div>
안녕? 나는 {name}이구, {age}살이야.
</div>
)
}
}props 사용 시 this.props로 render 메서드에서 불러와야한다.
Recap
지금까지 클래스형 컴포넌트를 중심으로 함수형 컴포넌트와의 차이점을 알아봤다. 생명주기에 대한 이해는 사실 클래스형 컴포넌트를 통해 학습하는 것이 좋기도 하고, 아직 레거시로서 클래스형 컴포넌트를 사용하는 곳도 실무에서 존재하니 이러한 차이점을 잘 숙지해두면 실무에서도 도움이 될 수 있을 것이라 예상된다.
