React Hook의 장단점

Hook이란?

상태 관리가 가능하고 라이프사이클 API를 사용할 수 있는 함수형 컴포넌트 

 

리엑트에서 컴포넌트를 정의하는 방법은 두 가지가 있다

1. 클래스형 컴포넌트

- state를 가지고 있어 상태 변화에 대한 관리를 할 수 있다.

- 단계별 라이프 사이클을 경험할 수 있고, 라이프 사이클 API를 사용할 수 있다.

 

2. 함수형 컴포넌트

- 클래스형 컴포넌트에 비해 선언하기가 간편하여 주로 화면을 그리는 역할을 한다.

- 메모리 자원을 클래스형 컴포넌트 보다는 덜 사용한다

- state와 라이프사이클 API사용이 불가능 하다

 

훅이 생겨난 이유에 대해서

1. 크고 복잡한 컴포넌트 때문에

- 리엑트에서는 고유한 역할을 가진 작은 단위의 컴포넌트로 분리한다 => 커다란 코드를 만들고 => 부작용을 최소화하는 방법을 가지고 있다.

- 프레젠테이션 컴포넌트(화면을 그리는 역할에 집중) 과 컨테이너 컴포넌트 (상태, 로직을 가지고 있는 컨테이너)를 통해 컴포넌트의 재사용성을 수월하게 할 수 있다.

하지만 컨테이너 컴포넌트는 상태와 비지니스 로직을 가지고 있기 때문에 이를 재사용하기는 쉽지 않다.

- 그래서 이 문제를 해결하기 위해 render props 그리고 고차 컴포넌트 HOC를 사용해야 했다.

 render props : 반복되는 로직을 쉽게 재사용 할 수 있게 해주고, 컴포넌트 코드를 작성하는 과정에서 컴포넌트를 함수로 감싸는 것이 아니라 JSX에서 렌더링하는 방식으로 사용할 수 있게 해주는 패턴

 HOC: 리엑트 컴포넌트를 인자로 받아 컴포넌트를 반환하는 함수

- 클래스 컴포넌트의 생명주기에서 연관 없는 코드들의 결합으로 인한 버그가 쉽게 발생하고, 무결성도 해쳐진다.

 

2. 중복된 로직을 피하기 위해서

 

3. 클래스가 주는 혼동 때문에 - 대표적인 this, 생명주기

 

Hook의 장점

1. 로직의 재사용 가능, 관리가 쉽다

- Hook은 함수형 컴포넌트이므로 함수 안에서 다른 함수를 호출하는 것으로 새로운 Hook을 만들어 볼 수 있기 때문이다.

따라서 리엑트의 내장되어 있는 Hook과 다른 사람들이 만든 여러 custom Hook을 레고처럼 조립해서 쉽게 만들 수 있다.

2. 로직을 한 곳으로 모을 수 있어서 가독성이 좋다

 - 클래스형 컴포넌트의 라이프사이클 API는 서로 다른 로직이 하나의 메서드에 섞여 있어서 가독성이 좋지 않다. Hook은 같은 로직을 한 곳으로 모을 수 있다.

3. 정적 타입언어로 타입을 정의하기가 쉽다

4. 상태 관리 방법을 더 쉽게 설명할 수 있다

 

https://velog.io/@jinsk9268/React-Hooks%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC