클래스형 컴포넌트 vs 함수형 컴포넌트 - Hook API 등장 전

요즘 React를 사용하는 개발자들은 함수형 컴포넌트를 많이 사용한다. 나 역시도 클래스형 컴포넌트를 작성해본 기억이 거의 없다. 그렇다면 리액트 개발자들은 클래스형 컴포넌트를 왜 만들었을까? 처음부터 함수형 컴포넌트만 사용하지? 🤔 ㅎ ㅎ 앞으로 몇 개의 글에 걸쳐서 리액트 사용법이 어떻게 발전되었는지에 정리해보려 한다. 

 

리액트가 등장했을 초반에는 함수형 컴포넌트보다 클래스형 컴포넌트가 훨씬 더 인기를 끌었다. 왜일까? 

클래스형 컴포넌트는 상태를 가질 수 있다

함수형 컴포넌트는 말 그대로 함수이다. 그리고 함수는 한번 호출되면 return과 함께 바로 종료되기 때문에 다시 호출할 수 없다. 물론 새로 호출은 가능하다. 함수 내에 변수를 선언하면서 상태를 가질 수는 있다. 하지만 이 상태의 생명주기는 함수의 생명주기와 동일하기 때문에 해당 상태는 함수 바깥에서 유지될 수 없다.

 

반면 클래스형 컴포넌트는 상태를 가질 수 있다. class 안에는 constructor를 통해서 데이터를 가질 수 있다. 리액트는 클래스형 컴포넌트가 처음으로 호출되면 new 연산자와 함께 클래스를 동작시켜서 객체를 만든다. 같은 클래스형 컴포넌트가 다시 호출됐을 때 리액트는 이 컴포넌트가 처음 불린 게 아니라는 것을 알고 이전에 만들어둔 객체를 계속해서 사용한다. 즉, 한번 만들어진 객체가 계속해서 이후에도 다시 호출되기 때문에 이 객체 내에 존재하는 상태도 계속 유지된다. 

 

이처럼 예전에는 상태를 가지려면 클래스형 컴포넌트를 사용해야했다.

클래스형 컴포넌트는 라이프사이클 메서드를 갖고 있다

클래스형 컴포넌트는 컴포넌트의 생명 주기와 관련한 라이프사이클 메서드를 갖고 있다. 함수형 컴포넌트에서는 이러한 동작을 할 수 있는 방법이 없었다. 라이프사이클 메서드를 사용하면서 컴포넌트를 더 다양하게 활용할 수 있었고, 상태와 관련해서도 컴포넌트를 더 정교하게 관리할 수 있었다.