React 전반적 개념 정리 👨‍💻 (클래스 vs 함수 컴포넌트)

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

 

이 컴포넌트를 만드는 방법은 클래스 컴퍼넌트를 이용하거나 함수(function) 컴포넌트를 사용한다. 즉 컴포넌트를 만들기 위해서는 클래스를 이용해도 되고 함수를 이용해서 만들 수도 있다. 클래스는 리액트에서 제공하는 컴포넌트라는 클래스를 extends, 상속해서 만들 수 있다. function은 간단하게 함수로 만들 수 있다. 

 

내 컴포넌트가 스테이트(State)가 있고 그 상태에 따라서 컴포넌트가 주기적으로 업데이트 되야 된다면 클래스 컴포넌트를 쓰고 내 컴포넌트에 상태(스테이트)가 없고 항상 정적으로 데이터가 표기가 된다면 함수 컴포넌트를 이용해서 간단하게 컴포넌트를 만든다.

 

State는 컴포넌트에서 가지고 있는 데이터를 말하며(클래스 컴포넌트를 이용, State를 변경해서 render 함수가 다시 호출 될 수 있게 만듬), Props는 내 컴포넌트에서 가지고 있는 State는 아니고 부모로부터 받아온, 부모에서부터 전달된 데이터가 Props에 들어게 된다. 

 

클래스(함수들이 묶여져 있는 것) 컴포넌트에는 컴포넌트에서 가지고 있는 상태, 관련된 데이터를 담을 수 있는 스테이트라는 오브젝트가 들어있다. 그래서 스테이트가 변경이 되면 렌더 함수가 호출이 되면서 업데이트된 내용이 사용자에게 보여진다. 또한 컴포넌트가 사용자에게 보여질 때, 돔 트리에 올라갔을 때, 돔 트리에서 나왔을 때 그리고 컴포넌트가 업데이트 되었을 때 등등 다양한 이 컴포넌트의 상태에 따라서 우리가 함수를 구현해 놓으면 리액트가 알아서 불러주는 라이프사이클 메서드가 있다. 

 

 

반대로 함수 컴포넌트에는 이런 스테이트가 없고 그리고 라이프사이클 메서드도 없다. 왜냐하면 함수는 한 가지 기능(한 가지의 업무)을 수행하는 작은 단위이기 때문이다. 하지만, 리액트 16.8버전부터는 함수에서도 클래스에서 했던 것처럼 할 수 있는 리액트 훅이라는 것이 도입이 되었다. 이 리액트 훅을 이용하면 함수 컴포넌트 안에서도 스테이트도 가질 수 있고 라이프사이클 메서드도 사용할 수가 있다. 즉 기존의 클래스 컴포넌트에서 할 수 있었던 것들을 함수 안에서도 할 수 있도록 도와주는 것이 리액트 훅이다. 

 

그런데, 클래스 컴포넌트를 이용하면 다 할 수 있는데 왜 굳이 함수에서 할 수 있게 리액트 훅이 도입이 되었을까? 그 이유는 클래스가 어렵기 때문이다. 디자이너와 협업하는 과정에서나 객체 지향적 언어를 제대로 배우지 못한 개발자들은 클래스를 이해하는데 굉장히 많은 어려움을 겪었다. 클래스가 어려웠기 때문에, 그리고 클래스를 이용하면서 있었던 this에 관련된 이슈 혹은 바인딩(binding)에 관한 이슈 그리고 라이프사이클 메서드의 함수 중복 이슈 등 상당히 불편한 점들때문에 리액트 훅은 등장한 것이다. 

 

그렇다고 해서 리액트 훅만 학습하고자 하는 것은 옳지않다. 리액트 훅은 상대적으로 최신에 도입된 것이기때문에 기존의 많은 프로젝트들은 이미 클래스 컴포넌트를 가지고 진행되어왔다. 따라서 우리는 기존의 클래스 컴포넌트를 활용하여 컴포넌트를 만들어가는 법과 리액트 훅을 이용하는 법 둘 다 익숙해져야 한다. 

 

 

그래서 결국, 컴포넌트에는 리액트에서 제공하는 컴포넌트가 있고, 함수를 이용해서 쓸 수 있는 function 컴포넌트가 있다. 그리고 리액트에서 제공하는 퓨어(Pure) 컴포넌트가 있고, 이와 비슷한 메모(memo)라는 함수형 컴포넌트(Higher Order Component라고도 부른다)가 있다. 그리고 스테이트와 라이프사이클이 가능항 함수형 리액트 훅이 있다. 

 

 

이제 리액트에 관해서 꼼꼼하게 배워나가보자.