[React] Custom Hook

React의 관심사

리액트는 UI를 구축하기 위한 라이브러리

1. UI
2. 로직 (UI를 변경시키는 부분)

UI는 실제 코드상에서는 JSX라는 형태로 표현되며 로직은 유저의 입력에 반응하고, API를 호출하고, 스크린의 변화에 반응하는 등 여러 동작들을 통해서 UI에 영향을 미치는 행위이다.

React에서 관심사를 분리하는 법: Presentational - Container

컴포넌트를 크게 두 계층으로 분리하는 방법

• Container
  로직들을 다루는 부분으로 UI에는 관여하지 않고 오로지 UI를 구성하고 변화하기 위한 로직에만 집중하는 컴포넌트

• Presntational
  로직은 상관하지 않고 UI가 어떻게 구성되어야 하는지에만 집중하는 컴포넌트

➡ Presentational을 Container로 감싼 후, 필요한 정보들과 로직을 모두 props로 전달해주는 형태로 설계하는 방법

이후 등장한 Custom Hook 때문에 더이상 많이 사용하지 않는다. Custom Hook이 더 효율적으로 관심사를 분리할 수 있다고 판단하기 때문에.

Custom Hook

리액트가 기본적으로 제공해주는 훅들을(useState, useEffect 등) 이용해서 만든 함수

로직은 UI를 변경시키기 위함이고, 함수형 컴포넌트에서 로직은 대부분 useState, useEffect 등의 Hook을 통해서 구현된다.

훅을 통해서 편리하기 state를 선언하고 effect를 발생시킬 수 있게 되었지만, 컴포넌트 내부에 많은 로직들이 들어가게 되면 컴포넌트가 복잡해지고, 무엇보다 동일한 로직들을 여러 컴포넌트에 걸쳐서 재사용하기 힘들다는 단점

일적반으로 동일한 로직이 보일경우 함수로 추출하듯이, 리액트에서도 Hook들을 이용한 동일한 로직들을 별도의 함수로 추출해서 여러 컴포넌트에 걸쳐서 사용하고자 하는 시도가 있었고 결국 커스텀 훅이란 기법을 만들게 되었다.

조건

1. React의 Hook들을 호출하는 함수여야 한다.
2. 함수의 이름은 use로 시작해야 한다.