먼저 리액트 컴포넌트란 웹어플리케이션, 웹페이지에서 독립적이고 재사용이 가능한 단위로(박스 단위로) 나뉘어진 블럭을 말한다. (최대한 독립적이고 재사용이 가능한 작은 단위로 만들어 나가면 👍)
따른 이야기로 잠깐 새자면 집을 설계할때 리액트는 서버에서 노드js처럼 하나의 블럭들을 본인 입맛대로 처음부터 뼈대를 잡아갈수 있다. 이와 반대로 프론트에서 엥귤러와 서버에서의 대표적인 스프링의 경우 집을 설계할때 기초적인 뼈대를 제공받고 그 뼈대에 맞게 하나하나씩 본인이 살을 붙히면 된다 (내 생각에는 스프링,엥귤러는 처음에 지켜야할 룰이나 배워야할 기초적인 것들이 많아 프로그래밍을 입문할때에는 많은 사람들이 벅차하는 것 같고 노드와 리액트의 경우 시작은 간단하지만 대규모 프로젝트같은 경우 지켜야할 룰이나 다른사람의 코드를 읽기 어렵다는 단점이 있어 이를 보완하기 위해 여러 디자인 패턴이나 컴포넌트를 최대한 독립적이고 간단하게 만드는것같다)
다시 리액트 컴포넌트로 돌아와 리액트 라이브러리를 이용해서 컴포넌트를 만들 수 있는 방법은클래스형, 함수형 두가지가 있다.
클래스형 컴포넌트
먼저 클래스형 컴포넌트의 경우 리액트에서 제공하는 React.Component 클래스를 상속하는 클래스를 만들어 UI가 어떻게 표기 될것인지 정의하는 redner()함수를 구현해야한다.
컴포넌트 안에서 기억되야 하는 상태들을 관리해주기 위해 this.state를 사용하며 this.state의 값이 변경되면 해당 컴포넌트가 리랜더링이 발생한다.
함수형 컴포넌트
함수형 컴포넌트는 클래스형 컴포넌트 처럼 componet를 상속받지 않아도 사용이 가능하고 컴포넌트 안에서 기억되야 하는 상태관리를 위해 useState함수를 이용하게 된다.
클래스형 컴포넌트는 함수형 컴포넌트에 비해 단점들이 있는데
코드가 길고 복잡하다. constructor,this, binding 등 지켜야 할 규칙이 많아서 코드가 복잡하고 길어진다. 클래스 자체가Life Cycle method로 인해 기본적으로 사이즈가 있다.
Logic의 재사용이 어렵다. 클래스형 컴포넌트에서는 High-Order Components(HOC)로 컴포넌트 자체를 재사용 할 수는 있지만 부분적인 DOM 관련 처리나 API사용 및 state을 다루는 등의 logic에 있어서는 경우에 따라 같은 로직을 2개 이상의 Life Cycle method에 중복해서 넣어야하는 등 재사용에 제약이 따른다. 이에 반해hooks를 활용한 함수형 컴포넌트에서는 원하는 기능을 함수로 만든 후(hook) 필요한 곳에 훅 집어 넣어주기만 하면 되기 때문에로직의 재사용이 수월해진다.
리액트훅(Hook)
함수형 컴포넌트에 리액트의 다른 기능들을 갈고리처럼 연결해주는것을 뜻함.
함수형 컴포넌트에 비해 가지는 이러한 단점들에도 불과하고, 그동안 클래스형 컴포넌트를 사용했던 이유는 위에서 언급했듯이state관리와Life cycle method의 사용때문이였다.
하지만 리액트 훅에서 state를 관리할 수 있는 useState함수와 리액트 컴포넌트 생명주기(Life cycle)를 관리할 수 있는 useEffect함수의 등장으로 기존 클래스형 컴포넌트의 단점들을 보완한 어쩌면 상위호환 버전인 함수형 컴포넌트가 많은 사람들에게 각광을 받게 된다.
