훅이란 무엇인가요?

공식문서

ko.reactjs.org/docs/hooks-intro.html#motivation

 

"훅은 컴포넌트로부터의 상태 관련 로직을 추상화 할 수 있다."

 

훅이 있기 전까지는 class 컴포넌트를 사용했습니다.

class는 그 자체가 새로운 인스턴스를 반환하고 그 인스턴스는 "this"를 저장하고 있기 때문에, 그 인스턴스 자체가 react에서 알고 있는 값이 되므로 react에서 제거하지 않는 이상, 페이지가 새로 렌더링 되더라도 해당 인스턴스를 기억하고 있기때문에, 상태관리를 자유롭게 할 수 있기 때문입니다.

 

반면에 함수 컴포넌트는 함수의 라이프 사이클 특성상, 생성 -> 갱신 -> 제거 과정을 거치고 return이 되면 메모리상에서 제거된다.

그렇기 떄문에 함수 컴포넌트는 자신의 동작이 끝나면 제거되고, 다시 새로운 페이지에 접근할때 이전 상태값을 기억하지 못하기 때문에, 상태관리가 불가능했다고 할 수 있다.

 

const compoent = new Func() 하면 함수로 상태관리를 할 수 있지 않냐는 궁금증이 생기실 수 있는데,

저게 바로 클래스처럼 인스턴스를 만드는 방법이다.

 

함수로 상태를 관리한다는 것은

 

const Func = () => {

   const state = 0;

}

 

위 코드처럼 진짜 함수가 state라는 값이 변경된 뒤에도 그 값을 유지하고 있어야 상태관리가 되는 것이다.

이를 해결하기 위해서 Hook이 나왔다.

 

Hook은 컴포넌트들로부터 상태관련 로직을 추상화하여 독립적인 테스트와 재사용이 가능하도록 해주는 것이다.

Hook이 상태를 전역으로 관리해주므로, 함수에서도 이전 상태를 기억할 수 있게 사용가능하게 되었다.