Class Component VS Function Component

"리액트는 컴포넌트들이다."

이 컴포넌트를 만드는 방법 중의 하나로 클래스 컴포넌트를 이용할 수도 있고 Fuction 컴포넌트도 있다.

클래스 컴포넌트는 리액트에서 제공하는 Component 라는 클래스를 extends, 상속해서 만들 수 있다. 

Function은 간단하게 함수로 만들 수 있다. 내 컴포넌트가 state가 있고 그 상태에 따라서 컴포넌트가 주기적으로 업데이트되어야 한다면 클래스 컴포넌트를 쓰면 되고 내 컴포넌트에 state(상태)가 없고 항상 정적으로 데이터가 표기가 된다면 함수 컴포는트를 이용해서 간단하게 컴포넌트를 만들 수 있다. 차이점은 클래스에는 관련된 데이터, 함수들이 묶여져 있는 것을 클래스라고 하는데 그래서 클래스는 컴포넌트에서 가지고 있는 상태, 데이터를 담을 수 있는 state라는 오브젝트가 들어있다. 그래서 state가 변경이 되면 렌더 함수가 호출이 되면서 업데이트 된 내용이 사용자에게 보여진다. 이 뿐 아니라 라이프사이클 메소드라는 컴포넌트가 사용자에게 보여질 때 돔트리에 올라갔을 때, 돔트리에서 나왔을 때 그리고 컴포넌트가 업데이트 되었을 때 등등 다양한 컴포넌트의 상태에 따라서 함수를 구현해 놓으면 리액트가 알아서 불러주는 라이플 사이클 메소드가 있다.

 반대로 함수에는 이런 state와 라이프사이클 메소드도 없다. 함수는 한가지 기능을 수행하는 단위이다. 하지만 React v16.8부터는 함수에서도 클래스에서 했던 것처럼 할 수 있는 리액트 훅이라는 것이 도입된다. 

 리액트 훅을 이용하면 함수 컴포넌트 안에서도 state와 라이프사이클 메소드도 사용할 수 있다. 기존의 클래스 컴포넌트에서만 할 수 있었던 것들을 함수 안에서도 할 수 있도록 도와주는 것이 리액트 훅이다. 

그런데 클래스 컴포넌트를 이용하면 다 할 수 있는데 왜 굳이 함수에서 할 수 있게 리액트 훅이라는 것이 도입이 되었을까. 그 이유는 클래스가 어렵기 때문이다. 많은 디자이너가 개발팀과 함께 협업을 해서 HTML과 CSS를 수정하는 일을 많이 했는데 리액트를 쓰게 되면서 클래스 단위로 표기가 되다 보니 많이 힘들어했다. 그리고 많은 개발자들 중에 기존의 객체지향언어인 C#이나 자바같은 언어를 배우고 온 사람은 쉬었겠지만 기존의 웹에서 스크립팅 언어만 했던 개발자들이 이 클래스를 이해하는데 굉장히 많은 어려움을 겪었다. 그래서 클래스가 어려웠기 때문에 그리고 클래스를 이용하면 맴버변수에 접근할 때 항상 this라고 붙여야 한다. 이렇게 반복적으로 불러야 되는 후출해야되는 "this.이름"이 불편했고 나중에 클래스에서 함수를 이용하면 바인딩 이슈가 있다. 불편한 것들이 조금 있었고 리액트에서도 functional programming을 이용해보자는 바람이 불면서 리액트 훅이 도입되었다.