hook을 사용하는 이유

Hook의 특징

---

• 선택적 사용 : 기존의 코드를 다시 작성할 필요없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있다. 그러나 만약 당장 Hook이 필요 없다면, Hook을 사용할 필요는 없다.
• 100% 이전 버전과의 호환성 : Hook은 호환성을 깨뜨리는 변화가 없다.
• 현재 사용가능 : 현재 배포하는 v16,8.0에서 사용할 수 있다.

 

 

Hook은 알고 있는 React 컨셉을 대체하지 않는다.

---

대신에 Hook은 props, state, context, refs, 그리고 lifecycle과 같은 리엑트 개념에 좀 더 직관적인 API를 제공한다.

또한 Hook은 이 개념들을 엮기 위해 새로운 강력한 방법을 제공한다.

 

 

 

왜 Hook이 나왔는가?

---

Hook은 5년 동안 우리가 리엑트에서 수만 개의 컴포넌트를 유지하고 작성하는데 만났던 

표면상 연결되지 않은 넓고 다양한 문제들을 해결했다.

 

1) 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어려웠다.

리엑트는 컴포넌트에 재사용 가능한 행동을 붙이는 방법을 제공하지 않는다.

(예를들어, 스토어에 컴포넌트를 연결하는 것) 만약 이전 부터 react를 사용해왔다면, 

이것을 해결하기 위해 render props 그리고 고차 컴포넌트를 사용했을 것이다.

그러나 이런 패턴을 사용할 때 컴포넌트를 재구성해야하며 코드를 추적하기 어렵다.

 

리엑트 개발자 도구에서 전형적인 리엑트 애플리케이션을 본다면, 

providers, consumers, 고차 컴포넌트, render props 그리고 'wrapper hell' 래퍼지옥을 볼 가능성이 높다.

 

리엑트는 상태 관련 로직을 공유하기 위해 좀 더 좋은 기초 요소가 필요하다.

 

Hook을 사용하면 컴포넌트로부터 상태관련 로직을 추상화할 수 있다.

Hook은 계층 변화없이 상태관련 로직을 재사용할 수 있도록 도와준다.

 

 

2) 복잡한 컴포넌트들은 이해하기 어렵다.

우리는 때로 유지하기 힘든 상태 관련 로직들과 사이트 이펙트가 있는 컴포넌트들을 유지해야한다.

각 생명주기 메서드는 자주 관련 없는 로직이 섞여 있다.

 

예를들어, 컴포넌트들은 componentDidMount 그리고 componentDidUpdate로 데이터를 가져오는 것을 수행할 수도 있다.

 

그러나 같은 componentDidMount 메서드라도 이벤트 리스너를 설정하는 것과 같은 

관계없는 일부 로직이 포함될 수도 있으며, 

 

componentWillUnmount에서 cleanup을 수행하기도한다.

 

이 과정에서 버그가 쉽게 생기기도 하고 무결성을 너무나 쉽게 해친다.

 

3) Class는 사람과 기계를 혼동시킨다.

 

class가 코드의 재사용성과 코드 구성을 좀 더 어렵게 만들 뿐 아니라, 

react를 배우는데 큰 진입장벽이라는 것을 알게 되었다.

자바스크립트에서 어떻게 this가 작동하는지 알아야만했고, 

대부분의 다른 언어와는 다르게 작동했다 

또한 이벤트 핸들러가 등록되는 방법을 기억해야만 한다. 

 

사람들은 props, state, top-down데이터 흐름을 완변하게 이해할 수 있지만, 여전히 class는 쉽지 않다.

 

더불어 class 컴포넌트가 다양한 최적화를 더 느린 경로로 되돌리는 의도하지 않은 패턴을 장려할 수 있다는 것이 발견된었다.

 

이런 문제들을 해결하기 위해, Hook은 class없이 react기능들을 사용하는 방법을 알려준다.

개념적으로 react 컴포넌트는 항상 함수에 더 가깝다. 

 

Hook은 React의 정신을 희생하지 않고 함수를 받아들인다. 

Hook은 명령형 코드로 해결책을 찾을 수 있게 해주며 복잡한 함수형 또는 반응형 프로그래밍 기술을 배우도록 요구하지 않는다.

 

 

 

 

출처: https://ko.reactjs.org/docs/hooks-intro.html