hooks 이란?
hooks 설명
Hooks 이란 무엇일까?
모든 용어들은 정의에서부터 그 의미가 시작된다.
공식 문서와 블로그들에서는 Hooks 을 무엇이라고 표현할까?
리액트 공식 문서에서는 Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. 정도로 표현하고 있다.
한 블로그 에서는 함수형 컴포넌트에서 react state와 생명주기 기능(lifecycle features)을 "연동(hook into)할 수 있게 해준다 라는 식으로 표현을 한다.
모두 hooks 의 역활을 통해서 hooks 이 무엇인지를 정의하는 것이다.
hooks 역활
그렇다면 결국 react 에서의 hooks 의 역활을 알기 위해서는 hooks 이 왜 도입되었는지 또한 알아야 한다.
도입 취지가 hooks 의 역활을 정확하게 설명해줄 것이기 떄문이다
공식문서에서는 hooks 의 도입 취지를 아래와 같이 설명하고 있다.
Hooks 도입 동기
- 컴포넌트 사이에서 상태 로직을 재사용하기 어렵습니다.
- 복잡한 컴포넌트들은 이해하기 어렵습니다.
- Class은 사람과 기계를 혼동시킵니다.
정리를 해보자면
hooks 라는 것은 react 16.8 버전부터 리액트의 함수형 컴포넌트에 도입되기 위해서 나타났다.
그 이전까지 주로 사용되던 리액트의 클래스형 컴포넌트에서의 mixin 역활을 대체하는 일종의 공통 모듈을 만드는 부분이라고 할 수 있다.
당연하게도 16.8 버전 이전에 기술된 문서들은 그렇기때문에 hooks 라는 개념이 없고 비슷하게 역활을 하는 것이 mixin 이라는 것을 알 수 있다.
함수형 컴포넌트와 클래스형 컴포넌트의 가장 큰 차이점 중 하나는 리액트의 생명주기(Life Cycle)을 얼마나 활용하느냐는 것이다.
함수형 컴포넌트에서는 리액트의 생명주기를 최대한 사용하지 않는다.
클래스형에서 mount, update, unmount 등에 대해서 주의해서 사용하였던 것에 비해 그러한 생명주기위 역활 보다는 state 에 대한 관리에 훨씬 더 신경을 쓴다.
결국 hooks 이란 mixin 을 대체하며 리액트의 생명주기 및 상태에 관여하여 연동(hooks in)하기 위한 공통 모듈이라고 볼 수 있을 것이다.
mixin 이라는것이 이제는 사용되지 않는 것을 감안하면
리액트에서의 hooks 이란
리액트의 생명주기 및 상태에 관여하여 연동(hook in)하기 위한 공통 모듈 정도로 볼 수 있지 않을까?
공통 기능
mixin 도 그렇고 hooks 도 그렇고 반복적으로 사용하되는 기능들을 재사용하기 위해서 모아놓은 공통 로직이라고 볼 수도 있을 것이다.
이러한 시도는 다양하게 반복되어져 왔다.
그 역활과 위치에 따라서 때로는 미들웨어가 되기도 하고, 때로는 유틸리티가 되기도 하고, 때로는 컴포넌트가 되기도 한다.
리액트에서 이러한 공통 기능, 공통 로직들을 모아놓은 것 중 하나가 컴포넌트라고도 볼 수도 있다.
다만 hooks 와의 차이점이라면 컴포넌트는 ui 를 표현하고 보여준다면
hooks 는 ui 가 제거된 컴포넌트라고도 볼 수 있지 않을까?
리액트의 공통 모듈
리액트에서 공통 로직을 담아두는 3가지 방식이 있다라고 한다면
- 순수하게 리액트와 별개로 동작 가능한 Util
- 리액트의 생태계를 사용하는 Hooks
- 화면까지도 포함하는 Component
와 같이 정리해볼 수 있을 것이다.
이때 리액트의 생태계라고 표현한 것은 리액트가 제공하는 생명 주기 및 다양한 상태 또는 기능들을 의미한다.
일종의 프레임워크로서의 리액트가 제공해주는 Role 위에서 동작하는 경우라고 볼 수 있을 것이다.
레퍼런스
공식 문서
Hooks 개요
https://ko.reactjs.org/docs/hooks-overview.html
Hooks 도입 동기
https://ko.reactjs.org/docs/hooks-intro.html#motivation
블로그
niboo
