Hooks란?
리액트 공식 문서에 다음과 같이 나와있다.
Hooks는 리액트 버전 16.8에 새로 나왔습니다. Hooks를 사용하면 클래스를 사용하지 않아도 상태 및 기타 리액트 기능들을 사용할 수 있습니다.
즉, Hooks는
상태 관리가 가능하고 라이프사이클 api를 사용할수 있도록 만든 함수형 컴포넌트이다.
Hooks의 등장 배경
Hooks가 등장하게 된 배경은 다음과 같다.
1. 길고 복잡한 기존의 클래스형 컴포넌트
기존의 클래스형 컴포넌트는 constructor, this, binding 등을 사용하는 과정에서 코드가 길고 복잡해진다.
=> Hooks를 사용하면 코드가 훨씬 간결해진다!
2. 중복된 로직
클래스형 컴포넌트는 재사용이 불가능하다. 2개 이상의 라이프사이클에 같은 로직을 넣어주는 경우가 발생하기도 한다.
=> Hooks를 사용하면 원하는 로직을 추상화하기 쉬워진다.
따라서 Hooks의 장점은 다음과 같다.
Hooks의 장점
1. 로직의 재사용성
Hooks는 함수형 컴포넌트이기 때문에 함수 안에서 다른 함수를 호출하는게 가능하다. 이를 통해 새로운 Hooks 함수를 생성할 수도 있다.
내장된 Hooks와 다른 사람들이 만들어 놓은 custom Hook을 가져와서 나만의 custom Hook을 만들 수도 있다.
2. 로직을 한 곳으로 모을 수 있다.
클래스형 컴포넌트에서는 하나의 라이플사이클 메서드에 2개 이상의 로직이 담기기도 해서 코드의 가독성이 나빠지는 문제가 있었다.
Hooks를 사용하면 같은 로직을 한 곳에 모을 수 있다는 장점이 있다.
3. 간결한 코드
클래스형 컴포넌트로 작성한 코드와 Hooks로 작성한 코드를 보면 확연한 차이가 나는 것을 볼 수 있다. Hooks를 사용하면 this,binding,constructor 등을 사용하지 않기 때문에 코드가 훨씬 간결해진다는 장점이 있다.
마치며
Hooks가 무엇인지, 왜 Hooks를 사용하는지에 대해 배워보았다. 다음 포스팅 부터는 Hooks의 다양한 컴포넌트들에 대해 하나씩 알아볼 예정이다. 클래스형 컴포넌트의 라이프사이클 메서드와 비교하며 공부하면 좋을 것 같다.
