TIL 71일차_ Why React Hook?

React Hook을 배우기 전에,
왜 React Hook을 써야하는지 확실히 짚고 넘어가려고 한다 😆

첫번째, Reuse

React Class component 사이에서는 상태와 관련된 로직을 재사용하기 어렵다.
props로 넘겨주다보면 코드를 추적하기 어렵고, 레이어로 둘러싸인 래퍼지옥을 볼 가능성이 높다.

React Hook?
컴포넌트로부터 상태관련로직을 추상화 할 수 있다.
Hook은 계층 변화없이 상태 관련 로직을 재사용할 수 있게 해준다.

두번째, 복잡한 컴포넌트에서의 어려운 상태관리

리액트에서 각 생명주기 메서드는 다양한 로직과 섞여있고,
각 상태관련 로직들은 모든 공간에 있기 떄문에,
이러한 컴포넌트들을 모두 작게 쪼개서 관리하는 것은 불가능하다.

React Hook?
이것을 해결하기 위해, 생명주기 메서드를 기반으로 쪼개는데 초점을 맞추기 보다는,
Hook에서는 로직에 기반을 둔 작은 함수로 컴포넌트를 나눈다.
예측이 쉽도록 리듀서를 활용해 컴포넌트의 지역상태값을 관리하도록 할 수 있다.

세번째, Class는 사람과 기계 모두를 혼동시킨다.

사람들은 props, state, 그리고 top-down 데이터 흐름을 완벽하게 이해할 수 있지만, 여전히 Class는 쉽지 않다.
React 안에서의 함수와 Class 컴포넌트들을 구별하고 각 요소를 언제 사용하는지는
숙련된 React 개발자 사이에서도 의견이 일치하지 않는다.

여기에 더해, Class는 최근 사용되는 도구에도 많은 문제를 일으킨다.
예를 들어 Class는 잘 축소되지 않고, 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만든다.

React Hook?
이러한 문제를 해결하기 위해, Hook은 Class없이 React 기능들을 사용하는 방법을 알려준다.
개념적으로 React 컴포넌트는 항상 함수에 더 가까우며,
Hook은 명령형 코드로 해결책을 찾을 수 있게 해준다.