React - Hook

Hook

Hook의 특징

• 기존 코드를 다시 작성할 필요 없이 일부 컴포넌트들 안에서 Hook 사용 가능함
• 이전 버전과 100% 호환 가능함
• React v16.8.0에서 Hook을 사용할 수 있음
• Hook은 state, context, refs, lifecycle과 같은 React 개념에 좀 더 직관적인 API를 제공함

Hook의 동기

• 문제 1 : 컴포넌트 사이에서 상태 관련 로직을 재사용하기 어려웠음

  • 이러한 문제를 해결하기 위해 render props나 고차 컴포넌트(Hoc)와 같은 패턴을 사용함
  • 그러나 이러한 패턴 사용은 컴포넌트의 재구성을 강요하며, 코드 추적을 어렵게 만듬
  • 상태 관련 로직을 공유하기 위해 좀 더 좋은 기초 요소가 필요해서 Hook을 추가함

• 해결 1 : Hook은 컴포넌트 계층구조의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줌

  • Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있음
  • 이를 통해 독립적인 테스트와 재사용이 가능함
  • 그러므로 여러 컴포넌트나 커뮤니티 사이에서 Hook을 공유하기 쉽게 만들어줌

• 문제 2 : 복잡한 컴포넌트들은 이해하기 어려움

  • 상태 관련 로직들과 side effect가 있는 컴포넌트들을 유지 보수하는 것은 어려움
  • 각 생명주기 메서드에 자주 관련 없는 로직이 섞여 들어가서 버그를 쉽게 바생시키고 무결성을 해침
    • componentDidMount와 componentDidUpdate는 컴포넌트 안에서 데이터를 가져오는 작업을 수행할 때 사용되어야 함
    • 그러나 같은 componentDidMount에서 이벤트 리스너를 설정하는 것과 같은 관계없는 로직이 포함되기도 함
    • componentWillUnmount에서 cleanup로직을 수행하기도 함
    • 이런 식으로 상호 관련 코드는 분리되고, 연관없는 코드가 단일 메서드에 존재할 경우 버그가 쉽게 발생하고 무결성을 쉽게 해침

• 해결 2 : Hook을 통해 서로 비슷한 일을 하는 작은 함수의 묶음으로 컴포넌트를 나눌 수 있음

  • 예를 들어 구독 설정 및 데이터를 불러오는 것과 같은 로직을 Hook으로 만들어서 재사용할 수 있음
  • 상태 관련 로직을 추적하기 쉽도록 reducer를 사용하여 컴포넌트의 지역 상태 값을 관리할 수 있음

• 문제 3 : Class는 사람과 기계를 혼동시킴

  • React 개발자들은 React에서 Class를 사용하기 어려워 했음
    • JavaScript의 this 키워드가 어떻게 작동하는지 알아야 함
    • 이벤트 핸들러가 등록되는 방법을 정확히 파악해야 했으며, public class fields를 사용하지 못하면 코드가 장황해짐
    • React 내의 함수와 Class 컴포넌트의 구별, 각 요소의 사용 타이밍 등에 대한 의견이 일치하지 않았음
  • React에서 Class 컴포넌트는 컴포넌트들을 미리 컴파일 해놓는 최적화를 더 느리게 하는 의도하지 않은 패턴을 장려함
    • 코드의 최소화를 힘들게 만듬
    • 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만듬

• 해결 3 : Hook을 통해 Class 없이 React 기능을 사용할 수 있음

  • React 컴포넌트는 개념적으로 함수에 가까움
  • Hook은 React 컴포넌트의 개념을 해치지 않으면서 함수 사용을 권장함
  • Hook은 복잡한 함수형 또는 반응형 프로그래밍 기술을 배우도록 요구하지 않음