커스텀 훅

리엑트 훅

컴포넌트 코드의 간소화, 캡슐화, 재사용성, 유지보수성의 증진을 약속

• 함수 컴포넌트가 리액트와 밀접하게 연동돼 작업하면서 훅을 사용해 마운트, 렌더링, 언마운트와 같은 생명 주기 이벤트에 끼어들게 해준다.

• 함수 컴포넌트에 훅을 사용하면 관련된 코드를 한 곳에 모을 수 있다.

훅 함수라는 사실을 명확히 하고 훅 규칙을 따라야 한다는 점을 나타내기 위해 커스텀 훅의 이름을 'use'로 시작

커스텀 훅

긴 함수를 여러 짧은 함수로 분리하는 것과 같은 방식으로, 훅이 수행되는 작업을 컴포넌트 외부에 있는 커스텀훅으로 추출해서 컴포넌트 코드를 단순화하고 기능을 재사용할 수 있게 준비할 수 있다.

기능을 커스텀 훅으로 분리

기능의 세부 내용을 훅으로 추상화 (캡슐화)

함수가 어떻게 동작하는지 보다 무엇을 하는지가 관건

• 관련된 코드를 여러 곳에 흩뿌리는 대신 한 장소를 유지함으로써, 응집도와 유지보수성을 높힌다.

• 기능을 커스텀 훅으로 이동시키면 해당 기능을 여러 컴포넌트에서 재사용할 수 있다.

• 컴포넌트 뿐만 아니라 커스텀 훅도 다른 커스텀 훅이 제공하는 추가 기능을 최대한 활용할 수 있다.

• 더 많은 기능을 커스텀 훅으로 이동함에 따라 컴포넌트 자체는 더 단순해지고, 상태를 받아와서 표시만 하는 프레젠테이션 컴포넌트와 비슷해진다.

• 훅의 기능과 관련 있는 상태나 효과를 훅 내부에서 관리하고, 컴포넌트에게는 꼭 필요한 값만 반환하라

훅을 채택하기 전, 프레젠테이션 컴포넌트는 비즈니스 로직을 래퍼 컴포넌트에 맡겼다. 하지만 훅을 사용하면 비즈니스 로직을 더 쉽게 캡슐화하고 재사용하며 공유할 수 있다.

훅 규칙 따르기

코드를 조직화하고 명확하게 할 때 훅이 주는 도움과 훅이 제공하는 효율적인 코드 추상화와 재사용이라는 약속은 모두 매력적임

• 그러나 훅이 이런 약속을 지키게 하기 위해, 리엑트 팀은 구현상의 결정을 내림

  • 커스텀 훅의 이름을 'use'로 시작

  • 최상위 수준에서만 훅을 호출

  • 리엑트 함수 안에서만 훅을 호출

최상위 수준에서만 훅을 호출하기

컴포넌트가 실행될 때 마다 일관되게 훅을 호출하는 것이 중요

컴포넌트가 실행될 때 마다 훅을 호출하는 횟수가 달라지는것을 피해야 한다. (호출의 일관성)

• 훅 호출을 건너뛰거나 컴포넌트 훅 호출 횟수를 변경할 수 있는 시나리오는 피하자

  • 조건문 안에 훅 넣지 않기

  • 반복문 안에 훅 넣지 않기

  • 중첩된 함수 안에 훅 넣지 않기

• 우리가 만든 훅은 항상 실행돼야만 하기 때문에, 훅을 조건 안에 넣는 대신, 훅 호출 안에 조건을 넣자.

리엑트 함수 안에서만 훅을 호출하기

훅을 사용하면 함수 컴포넌트가 상태를 소유할 수 있고 부수 효과를 발생시키거나 사용하는 시점을 관리 할 수 있다.

• 훅을 사용하는 컴포넌트는 이해하기 쉽고 유지보수하기 쉽고 공유하기 쉬워야 한다.

• 훅이 제공하는 상태는 예측 가능하고 신뢰성 있어야 한다.