[React Hook] 리액트 Hook 총정리(1) - Hook이란?

여전히 패스트 캠퍼스 강의를 듣고 있다.

나는 분명 이 강의가 리액트를 아예 모르는 사람들을 위한 강의인 줄 알았는데

어우 Hook을 설명도 없이 막 쓴다. 그래서 당황한 마음에 리액트에서 자주 사용하는 Hook을 정리하려고 한다.

(Hook은 커스텀도 가능하고 계속 만들어지고 있기 때문에 모든 hook을 설명하는 건 힘들다)

먼저 Hook에 대해 알아보자

Hook이란?

Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.

Hook은 함수형 컴포넌트에서 사용되는 기능으로 클래스형 컴포넌트에서 가능했던 state나 다른 기능들을 함수형 컴포넌트에서도 사용할 수 있게 도와준다. 또한, 기존에 클래스형 컴포넌트가 가지고 있는 몇 가지 단점들을 보완하기 위해 Hook이 탄생했다고 한다. 그 단점들은 다음과 같다.

1. 컴포넌트 사이에서 상태 로직을 재사용하기 힘들다.

리액트는 원래 컴포넌트 간에 재사용가능한 로직(함수같은거)을 제공하지 않는데 대부분의 사용자들이 render-prop이나 고차 컴포넌트라는 방법을 통해 이 문제를 해결했었다. 그러나 이러한 방법들을 사용하면 컴포넌트의 재구성을 요구하게돼 기존의 코드와 많이 달라져 이후 코드를 추적하기가 어려워지게 된다.

 

이때 Hook을 사용하게 된다면 컴포넌트로부터 상태관련 로직을 추상화할 수 있어 독립적인 테스트와 재사용이 가능해진다. 즉, 여러 계층을 사용해 로직 재사용을 구현했던 과거와 달리 계층의 변화 없이 상태 관련 로직을 재사용할 수 있게 되었다.

 

2. 컴포넌트가 복잡해질수록 이해하기 힘들어진다.

유지보수를 할 때 사이드이펙트에 대해 고려해야한다. 사이드이펙트는 해당 컴포넌트가 실행될 때 다른 컴포넌트에서도 상태나 형태를 변경시키는 것을 말한다. 클래스형 컴포넌트를 사용할 때는 생명주기 메소드를 사용하는데 이 메소드를 사용할 때, 지금 사용하는 기능과 관련이 없는 로직이 들어갈 때가 많다. 그래서 복잡한 컴포넌트에서 생명주기 메소드를 수정하게되면 예상치못한 사이드이펙트가 발생해 버그를 일으킬 수 있다. 그리고 상태 관련 로직은 한 공간에 묶여있기 때문에 컴포넌트를 작게 분리하는 것은 불가능하기 때문에 대부분의 개발자들이 라이브러리를 이용해 이 문제를 해결했었다. 그러나 상태 관련 라이브러리는 너무 많은 추상화를 할 수 있고 서로 다른 파일 사이의 건너뛰기를 요구할 수 있기 때문에 컴포넌트간의 재사용을 어렵게 만들었다.

 

Hook을 이용한다면 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나눌 수 있고 리듀서를 이용해 지역 상태 값을 관리하고 추적을 쉽게 할 수 있다. 

3. JS의 클래스는 사용자나 컴퓨터에게 혼동을 줄 수 있다. 

JS의 클래스의 this는 다른 언어의 this와는 조금 다르다. 

그래서 클래스형 컴포넌트를 사용하기 위해선 JS에 대한 지식을 가지고 있어야 했다. 또한, 클래스를 사용하기 위해서 이벤트 핸들러가 등록되는 방법이나 생명주기 메소드에 대한 지식을 충분히 가지고 있어야 개발이 가능했으며 리액트에서 표준 필드를 제공하기 전에는 각기 다른 장황한 코드를 설계하는 일이 다반사였다. 리액트가 많은 사람들에게서 사용되기 위해선 쉽게 이해할 수 있어야 했기 때문에 Hook을 이용해 리액트의 중심을 클래스형 컴포넌트에서 함수형 컴포넌트로 전환해 더 많은 사람들이 리액트를 사용할 수 있도록 유도했다.

 

위 글을 보면 지금까지 클래스형으로 제작한 코드들을 함수로 바꿔야 하는가 생각이 들 수 있다. 그러나 리액트에서는 계속해서 클래스형 컴포넌트를 지원할 계획이라고 밝혔으며 복잡한 형태의 클래스형 컴포넌트의 경우 변경하지 않고 함수형 컴포넌트의 전환과 Hook의 적용에 대해 많은 고려를 해보라고 말한다 그러면 지금 만드는 건 함수형으로 만들라는 소린가

 

자 그럼 이제 다양한 Hook에 대해 알아보자

 

2023.01.20 - [Front-End/React] - [React Hook] 리액트 Hook 총정리(2) - useState

[React Hook] 리액트 Hook 총정리(2) - useState