useRef & Custom Hook

useRef

Reference(참조) 말그대로 할당한 값을 참조하는 객체를 반환한다.

useRef 특징

• 컴포넌트 생애주기 전체에 걸쳐서 유지되는 객체, 즉, 컴포넌트가 언마운트될 때 까지 유지된다.

• 값이 변경 되어도 리렌더링을 유발하지 않는다.

useRef를 언제 쓰나

• 컴포넌트가 언마운트될 때 까지 동일한 값을 써야 하는 경우 → input의 ID를 관리할 때

• DOM 요소에 직접 접근해서 제어할 때 자주 사용된다 → 할당한 DOM 요소에 포커싱

• 상태의 이전 값과 비교해서 특정한 작업을 처리 할 때

• setTimeout, setInterval 등 타이머 ID를 저장할 때

Custom Hook

React의 Hook을 조합하여 특정한 기능을 재사용 가능한 코드로 만드는 것

커스텀 훅 규칙

• React에서 제공해주는 훅들의 네이밍 처럼 앞에 use 를 붙여 카멜케이스로 사용

• 기본적인 Hook의 규칙들과 동일

커스텀 훅 장점

• 컴포넌트에서 비즈니스 로직과 UI를 분리하여 가독성과 유지보수성을 높힐 수 있다.

• 로직을 분리하고 의미있는 이름을 부여함으로써, 코드의 추상화 수준을 높힐 수 있다.

• 재사용성을 높이고 중복되는 코드를 줄일 수 있다.

• 하나의 목적을 가지는 코드를 커스텀 훅으로 추출하여 응집도를 높힐 수 있다.

커스텀 훅 안티패턴

• 불필요한 추상화

  • UI를 제외한 코드를 모두 커스텀 훅으로 숨기게 되면 오히려 코드를 이해하기 어려워진다.

  • 숨겨도 되는 로직은 커스텀 훅에 숨기고, 핵심 로직은 컴포넌트 내에 두는 것이 더 좋을 수 있다.

• 너무 많은 책임

  • 하나의 커스텀훅에 여러 역할이 섞여있으면 해당 훅을 사용하는 컴포넌트가 지나치게 복잡해 질 수 있다.

  • 커스텀 훅도 마찬가지로 단일책임원칙에 따라 작성되어져야 한다.