리액트 훅이란 종류 사용하는 이유 정리

리액트에서 제공하는 특별 라이브러리, 리액트 훅에 대해서 상세히 살펴봤습니다.

---

여러분들은 '리액트'를 알고 계십니까? 이 글을 포스팅하는 저 또한 처음 들어본 내용이었는데 사실, 어떠한 프로그램 중 하나라고 하는데 특히 기업이나 각종 개발사 등에서 사용하고 있는 만큼 다른 곳들 또한 눈여겨보고 있다고 합니다. 그렇다면 이 리액트라는 것에 대해서 먼저 상세히 알아볼 필요가 있다고 할 수 있겠는데, 이번 포스팅에서 이에 대해 살펴보도록 하겠습니다.

 

먼저 리액트는 '메타'라는 곳에서 개발한 오픈 소스의 자바스크립트 라이브러리 프로그램으로 개발자들 사이에서 많은 인기를 얻고 있는 툴이기도 합니다. 그래서 이들 사이에서는 다운로드 수가 많은 편이라고 하며, SPA를 전제로 더티 체킹과 비주얼 돔을 활용해서 업데이트 해야 하는 부분만 찾아서 업데이트 해주기 때문에 렌더링이 잦은 동적인 웹에서 활용하고 있다고 합니다. 이는 이러한 웹사이트에서 빠른 퍼포먼스를 자랑하고 있다보니 가능한 부분이라고 합니다.

 

다만, 싱글 앱에서 UI를 만드는데 집중된 툴이기도 한 만큼, 앱 자체를 제작하는 용도로는 많은 부족함들이 존재합니다. 예를 들어서 페이지 전환 기능을 제공하고 있지 않다보니 이 툴을 이용해야 한다면 추가적인 라이브러리를 같이 사용해야 합니다. 이 말고도 다양한 상황에서 여러 툴을 활용하기 때문에 단독 사용은 불가능하고, 타 도구들과 함께 활용한다면 도움이 되겠습니다.

 

이 외에도 리액트는 단방향에서의 데이터 바인딩 기능을 제공하여 사용자 UI의 데이터 변경을 감시하는 와쳐와 자바스크립트의 데이터 변경을 감시하는 와쳐가 이러한 데이터를 자동으로 동기화시켜줌에 따라 자바스크립트내에서 데이터 변경과 사용자 UI에 데이터 변경에 관한 동기화를 신경쓰지 않고도 프로그램 작성이 가능합니다. 그렇다보니 이 부분에서도 많은 도움을 받았다고 할 수 있겠습니다.

 

이렇게 리액트는 기본적으로 모듈형 개발을 위한 라이브러리 툴이다보니 이에 따른 고유한 특징을 가지고 있고 생산성 또한 상당히 높은 라이브러리 도구로서 순식간에 대세로 떠오르기도 했습니다. 거기에 기본적으로 프레임워크가 아니라서 다른 프레임 워크에 간단하게 붙어서 사용하는 것도 가능하다고 합니다.

 

이러한 특징으로 많은 개발사들의 필수 도구가 된 리액트, 리액트 내에는 여러 툴들이 준비되어 있는데 이들중에는 리액트 훅이라는 기능 또한 존재합니다. 클래스형 컴포넌트에서 이용하던 코드를 별도로 작성할 필요 없이도 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 하는데 지난 리액트 16.8버전부터 추가된 기능으로서 필요한 곳에서 충분한 활용성을 가진 기능이라고 할 수 있겠습니다.

 

반응형

 

함수형 컴포넌트에 맞춰서 만들어진 기능이다보니 이를 사용하기 위해서는 특정한 조건이 필요한데, 이 부분을 주의하면서 활용해볼 필요가 있다고 할 수 있겠습니다. 대표적인 조건으로는 코드 내에서 훅은 최상위에서만 호출이 가능하고 일반적인 JS 함수에서의 호출은 불가능하며, 함수형 컴포넌트나 커스텀에서는 호출이 가능하기도 합니다. 그렇기 때문에 개발자들이라면 주의 깊게 살펴보시고 활용하시는 것이 뭣보다 중요하다고 할 수 있겠습니다.

 

이 리액트 훅에는 다양한 종류를 가지고 있는데, 유스스테이트, 이펙트, Ref, 메모/콜백, 그리고 콘텍트로 총 5가지 종류가 있습니다. 각각의 종류에는 특징이라든지 사용 방법들이 각자 다르기 때문에 이 부분도 활용한다면 도움이 되겠습니다.