All Articles

Hook

Hook은 react의 최신 기술로서 기존의 코드를 다시 작성할 필요 없이 컴포넌트들 안에서 Hook을 사용할 수 있으며, 이전 버전과의 호환성이 100%로 호환성을 깨뜨리지 않는다.

Hook은 알고 있는 react의 컨셉을 대체하지 않는다.
대신 props, state, context, refs 그리고 lifecycle 같은 react 개념에 좀 더 직관적인 API를 제공한다.
react는 컴포넌트에 재사용 가능한 행동을 붙이는 방법을 제공하지 않는다.
이를 해결하기 위해 render props 그리고 hoc(high order component)와 같은 패턴에 익숙할 것이다.
그러나 이런 패턴을 사용할 때 컴포넌트를 재구성해야하며 코드를 추적하기 어렵게 만든다.
요점은 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다.
그래서 상태 관련 로직을 공유하기 위해 좀 더 좋은 기초 요소가 필요하다.
그래서 Hook이 나온것!

Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있고 독립적인 테스트와 재사용이 가능해진다.
Hook은 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다.
이는 많은 컴포넌트들 혹은 커뮤니티 사이에서 Hook을 공유하기 쉽게 만들어준다.

간단하게 시작했지만 유지하기 힘든 상태 관련 로직들과 사이드 이펙트가 있는 컴포넌트들을 유지해야한다.
각 생명주기 메서드는 자주 관련 없는 로직이 섞여 있다.
함께 변경되는 상호 관련 코드는 분리되지만 완벽하게 연관 없는 코드들은 단일 메서드로 결합합니다.
이로 인해 버그와 무결성을 너무나 쉽게 발생합니다.
상태 관련 로직이 모든 공간에 있기 때문에 이러한 컴포넌트들을 작게 만드는 것은 불가능하고 테스트하기도 어렵다.
이는 많은 사람이 react를 별도의 상태 관리 라이브러리와 함께 결합해서 사용하는 이유 중 하나이다.
그러나 상태 관리 라이브러리는 종종 너무 많은 추상화를 하고 다른 파일들 사이에서 건너뛰기를 요구하며 컴포넌트 재사용을 더욱 어렵게 만든다.

이것을 해결하기 위해 생명주기 메서드를 기반으로 쪼개는 데 초점을 맞추기 보다는 Hook을 통해 로직에 기반을 둔 작은
함수로 컴포넌트를 나눌 수 있다.
Hook은 class없이 react 기능들을 사용하는 방법을 알려준다.