이번엔 딱 개념만 간단설명!
hook 컴포넌트 유지보수를 더 쉽게 해주고 생명주기 메서드에 관련없는 로직이 섞여 들어가는것을 방지한다. 그리고 연관없는 코드들이 단일 메서드로 결합되서 발생되는 버그를 예방시켜준다.
서로 비슷한것을 하는 작은 함수의 묶음으로 컴포넌트를 나눈다.
이러한 장점이 있지만 최신기술이다 보니 react에서도 권장하지는 않는다.
더 많은 예시와 자습서가 나올때 까지 기다리는게 낫다고 한다.
내가 공식 문서를 보고 이해한 바로는
컴포넌트 사이에서 상태 로직을 재 사용하기 어렵고 고차 컴포넌트 그리고 다른 추상화에 대한
레이어로 둘러 싸인 wrapper hell 에서 벗어나기 어려웠는데
Hook 을 사용하게 되면서 컴포넌트로 부터 상태 관련 로직을 추상화 할수있게 되었고 이를 이용해 독립적인 테스트와 재사용이 가능해졌다.
상태관련 로직들과 사이드 이펙트가 있는 컴포넌트들을 유지 보수 해야하지만 각 생명주기 메서드에는 자주 관련 없는 로직이 섞여 들어가곤 합니다. 예를들어 componentDidMount 와 componentDidUpdate 는 컴포넌트 안에서 데이터를 가져오는 작업을 수행할때 사용 되어야 하지만 같은 componentDidMount 에서 이벤트 리스너를 설정하는것과 같은 관계없는 로직이 포함되기도 하면서 ComponentWillUnmount에서 cleanup 로직을 수행하기도 합니다. 그래서 함께 변경되는 상호관련 코드는 분리되지만 연관없는 코드들도 단일 메서드로 결합되서 이로 인해 버그가 쉽게 발생하고 무결성을 해치기 쉽다고 한다.
상태관련 로직은 한 공간안에 묶여있기 때문에 이런 컴포넌트들을 작게 분리하는 것은 불가능 하고 테스트 하기도 어렵다.
그래서 이와 같은 문제를 해결하기 위해 생명주기 메서드를 기반으로 쪼개는것 보다는 Hook 을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다고 한다.
그렇지만 Hook 은 너무나도 최신 기술이고 아직 안정한지를 모르기 때문에 상대적으로 중요성이 덜한 새 컴포넌트에서 Hook을 사용하는것이 최고의 연습이라고 합니다.
