참고
Custom Hook
NOTE
커스텀 훅의 핵심은 반복되는 로직을 하나로 묶어 재사용하기 위함이다!
•
커스텀 훅을 사용해서 만든 기능은 각 컴포넌트에서 독립된 state를 가진다!
사용법
NOTE
상황 → 블로그에 광고를 달아야한다!
•
유저가 어떠한 페이지에 들어가면 광고가 나온다
•
광고 제거를 누르면 당분간 나오지 않는 코드를 작성했다 생각해보자!
function useAdOnOff(initialForm) {
const [userAdOn, setUserAdOn] = useState(initialForm);
const 유저가_광고_제거를_눌렀는_지_서버에서_확인하는_대충_복잡한_작업 = () => {
...확인중
if (광고제거함) return true
else if (광고제거안했음) return false
}
return 유저가_광고_제거를_눌렀는_지_서버에서_확인하는_대충_복잡한_작업();
}
export default useInputs;
JavaScript
복사
◦
이와 같이 커스텀 훅이 만들어지고, 대충 작업을거치고 제거했다면 True, 아니면 False를 리턴한다.
◦
커스텀 훅 → Hooks의 API들을 이용해서 원하는 기능을 만드는것
▪
useState, useEffect, useCallback, useReducer와 같은 것
▪
useAdOnOff도 Hooks의 API가 됐다.
실제사용
import React from 'react';
import useAdOnOff from './hooks/useAdOnOff';
import 광고입니다 from "./components/ad";
const 여러가지_페이지_중_하나 = (...) => {
const [isAdDelete] = useAdOnOff(props.user.id);
return (
<div>
<광고입니다 isUserAdDelete={isAdDelete} />
...
</div>
);
};
export default 여러가지_페이지_중_하나;
JavaScript
복사
•
이제 useAdOnOff를 사용해서 광고 제거를 했는지 알 수 있다.
실제사용 2
const useInput = (validateValue) => {
const [enteredValue, setEnteredValue] = useState("");
const [isTouched, setIsTouched] = useState(false);
const valueIsValid = validateValue(enteredValue);
const hasError = !valueIsValid && isTouched;
const valueChangeHandler = (event) => {
setEnteredValue(event.target.value);
};
const inputBlurHandler = (event) => {
setIsTouched(true);
};
const reset = () => {
setEnteredValue("");
setIsTouched(false);
};
return {
value: enteredValue,
isValid: valueIsValid,
hasError,
valueChangeHandler,
inputBlurHandler,
reset,
};
};
export default useInput;
Java
복사
const {
value: enteredName,
isValid: enteredNameIsValid,
hasError: nameInputHasError,
valueChangeHandler: nameChangeHandler,
inputBlurHandler: nameBlurHandler,
reset: resetNameInput,
} = useInput((value) => value.trim() !== "");
JavaScript
복사
왜 사용하는가? (추상화)
NOTE
•
물론 위와 같이 반복되는 로직을 하나로 묶어서 재사용하는 코드는 커스텀 훅을 잘 사용하고 있는 경우가 확실한거 같다.
•
그런데 이렇게 재사용되는 경우가 아니면, 커스텀 훅을 사용하지 않아야하는가?
◦
사용하는 것이 좋은 경우도 존재한다. (무조건은 아님)
선언형 프로그래밍
•
모든 코드를 보지 않아도 내부에서 어련히 잘 구현했다고 믿고 사용하는 개념임
•
예시를 위해 위의 코드를 다시한번 보자.
import React from 'react';
import useAdOnOff from './hooks/useAdOnOff';
import 광고입니다 from "./components/ad";
const 여러가지_페이지_중_하나 = (...) => {
const [isAdDelete] = useAdOnOff(props.user.id);
return (
<div>
<광고입니다 isUserAdDelete={isAdDelete} />
...
</div>
);
};
export default 여러가지_페이지_중_하나;
JavaScript
복사
◦
대펴적으로 <광고입니다 /> 부분과 커스텀 훅이 선언적 표현이라 할 수 있다.
◦
안쪽에 어떠한 코드가 있는지 정확히는 모르지만 어떠한 기능인지 추측이 가능함.
◦
이렇게 겉만 보고 추측할 수 있는 것을 개념적으로 설명하면 추상화 작업이라 한다!
▪
한마디로, 코드를 리팩토링할 때 쓰는 개념
주의사항
NOTE
커스텀 훅을 생성할때 고려할점
•
추상화를 해서 코드를 작성했다면 추상화의 레벨이 적절하게 잘 이뤄졌는가?
•
커스텀 훅을 사용하지 않아도 되는 부분에서 조차 사용하지 않았는가?
•
만들어진 커스텀 훅은 한 가지 기능만을 하고 있는가?
•
사이드 이펙트를 일으킬 부분이 있지 않는가? 여러가지 경우의 수를 생각해서 작성하라.
커스텀 훅 사용할 시 고려할점
•
커스텀 훅이 함수를 반환하고, 컴포넌트 안에서 함수를 사용할 때 해당 함수는 컴포넌트가 재실행할때마다 재생성되므로, useEffect를 사용하는 경우 커스텀 훅 안에 있는 함수들은 모두 useCallback으로 wrapping해주어야 한다.
주의사항
NOTE
커스텀 훅
•
컴포넌트 함수에 들어가는 코드를 감싸고 재사용하기 위함
•
비슷한 useEffect내부의 코드를 재사용하기 위함(컴포넌트의 개념)
가장 간단한 방법은 함수로 빼는것이다.
•
하지만 컴포넌트 내부에서만 동작하는 코드를 어떻게 따로 관리하는가?
커스텀 훅을 만들자
•
함수를 생성한다. (use로 시작해야함, Hook으로 인식되기 위해서)
•