[Udemy React 완벽 가이드] Section 14

'커스텀 훅'이란?

• 안에 상태를 설정할 수 있는 로직을 포함한 함수
• 커스텀 훅을 만들어서 재사용 가능한 함수에 상태를 설정하는 로직을 아웃소싱할 수 있다
• 정규 함수와는 다르게 커스텀 혹은 다른 커스텀 훅을 포함한 다른 리액트 훅을 사용할 수 있다
• useState나 useReducer를 통해 관리하는 리액트 상태를 활용할 수 있다
• 커스텀 훅을 통해 다른 컴포넌트에서 사용할 수 있는 로직을 커스텀 훅으로 아웃소싱할 수 있으며, 이를 통해 다양한 컴포넌트에서 호출이 가능하다
• 로직 재사용이 가능한 메커니즘
• 정규 함수와 특수 함수의 관계와 같이 커스텀 훅 함수에서는 리액트 훅과 다른 훅을 사용할 수 있다

 

 

커스텀 리액트 컴포넌트 Re-Evaluation Hook 함수 생성하기

• 별도의 함수에 이러한 공통 로직을 아웃소싱하려면 커스텀 훅을 만들어야 한다
• 커스텀 훅을 만들려면 일반적인 컴포넌트와 같이 모든 훅을 독립된 파일에 저장하면 된다
• 새로운 파일을 만들어 그 안에 함수를 만드는데 이름이 무조건 use로 시작해야 한다.
• 이름 앞에 붙인 use는 리액트에게 이 함수가 커스텀 훅임을 알려주며 이는 리액트가 해당 함수를 훅의 규칙에 따라 사용하겠다고 보장해 주는 것이다
• 리액트 훅을 커스텀 훅에서 사용하면서 커스텀 훅을 잘못된 곳에서 사용하게 된다면 내장 훅 역시 잘못된 곳에서 쓸 수 있음을 내포하게 된다
• 프로젝트 셋업이 함수가 use로 시작하면서 훅의 규칙을 위반한 것이 발견되었을 때 경고를 보낼 수 있다
• 궁극적인 목적은 이 함수를 다른 파일에서 사용하는 것이므로 이 함수를 익스포트하고 이 함수 안에서 재사용하려는 로직을 추가하면 된다

 

 

사용자 정의 훅 사용하기

• 커스텀 훅을 사용하는 것은 내장 훅을 사용하는 방법과 동일하다
• 만약 컴포넌트 안에서 커스텀 훅을 호출하고 이 컴포넌트가 예를 들어 어떤 상태나 효과를 이런 식으로 등록한다면 그 상태나 효과가 커스텀 훅을 사용하고 있는 컴포넌트에 묶이게 된다
• 다수의 컴포넌트에서 커스텀 훅을 사용하게 되면 모든 컴포넌트가 각자의 상태를 받게 된다
• 커스텀 훅을 사용한다고 해서 컴포넌트 전반에 걸쳐 상태나 효과를 공유하는 것은 아니다
• 모든 컴포넌트 인스턴스가 각자의 상태를 받게 되고 로직만 공유하지 상태를 공유하는 것이 아니다
• useState와 같은 내장 훅도 백그라운드에서 상태를 만들고 관리를 하며 구조를 분해하고 있는 배열을 반환한다
• 커스텀 훅에서는 배열, 숫자, 객체 등 필요한 무엇이든간에 반환이 가능하다
• 커스텀 훅을 만드는 방법에서 가장 중요한 것은 이름 짓기이다
• 항상 use로 시작해야 하고 상태와 관련된 로직을 사용한다던가 다른 리액트 훅을 사용할 수 있으며 이를 통해 컴포넌트 간에 특정 로직을 공유할 수 있게 된다

 

 

사용자 정의 훅 구성하기

• 커스텀 훅도 함수이기 때문에 매개변수를 받을 수 있다
• 예를 들어 내장 훅인 useState 또한 초기 상태를 설정하는 매개변수를 받을 수 있다
• 서로 다른 인자를 사용하는 useCounter를 쓰는 컴포넌트가 있는 경우에는 인자가 바뀌면 effect 함수 역시 재실행되는 것을 보장할 수 있다
• 카운터가 앞뒤로 바뀌는 컴포넌트가 있다면 값이 변하게 되었을 때 새로운 로직을 이용해 카운터를 재시작해야 한다

 

 

사용자 정의 훅 로직 조정하기

• 상태 설정이 발생하면 커스텀 훅을 사용하는 컴포넌트들이 재렌더링을 하게 되는데, 그 이유는 상태를 설정하는 커스텀 훅을 만들고 컴포넌트의 훅을 사용하게 되면 컴포넌트는 묵시적으로 커스텀 훅이 설정한 상태를 사용하게 된다
• 내부에 같은 로직을 품고 있더라도 함수가 재생성되면 메모리에서 새로운 객체로 인식되어 useEffect가 이를 새로운 값으로 받아들이게 되고 기술적으로 같은 함수일지라도 재실행을 유발하게 된다
• 커스텀 훅을 추가하는 가장 큰 이유는 컴포넌트 간에 로직을 재사용하기 위함이다