오늘은 챌린지 반 수업에서 React 커스텀 훅에 대해서 배웠다. 여러 예제를 통해서 커스텀 훅에 대해서 배웠고 내가 느낀 커스텀 훅은 2가지 정도의 역할이 있는 것 같다.

1. 반복되는 로직을 줄여서 재사용성을 높여주는 역할
2. 다른 컴포넌트에 책임(기능)을 가져오는 역할

반복되는 로직 줄이기

아마도 대표적인 반복되는 로직 줄이기는 아래와 같은 방식이 있을 것이다.
많이 사용하는 input 관련 에를 들면 이해가 쉬울 것 같은데

function FormComponent() {
  	const [name,setName] = useState('');
  	const handleName = (event) => setName(event.target.value);
  
  	return <input value={name} onChange={handleName}/>
}

위 로직을 보면 2가지로 구분할 수 있다.

1. useState를 이용한 상태값 관련 데이터 가져오기
2. 이벤트 핸들을 위한 이벤트 핸들러 함수 사용하기

이 로직을 커스텀 훅으로 만들면 아래 처럼 사용할 수 있다.

function useInput(initialValue) {
  	const [value,setValue] = useState(initialValue);
  	const handleValue = (event) => setValue(event.target.value);
  	return [value,handleValue];
}
// FormCompoennt.js
function FormComponent() {
  	const [name,handleName] = useInput('');
  	const [password,handlePassword] = useInput('');
  
	return (<form>
        <input value={name} onChange={handleName}/>
        <input value={passwrod} onChange={handlePassword}/>
	</form>)
}

이렇게 반복되는 로직을 하나의 커스텀 훅을 이용하여 input state 관리 로직을 얼마든지 재사용할 수 있다.

책임(기능) 가져오기

내가 멋대로 이름을 붙인 내용이기는 하지만 이 말의 의미는 다음과 같은 의미로서 사용했다.

C라는 컴포넌트에서 A 기능과 B기능이 있을 때, A 기능과 B 기능은 커스텀 훅에서 구현을 하고 C 컴포넌트는 그저 해당 기능을 사용만 한다면 A와 B 커스텀 훅은 C에게서 책임을 가져온 것이다.

아래와 같은 패턴이 내가 설명하려던 내용이다. 만약에 CComponent에서 한번만 실행되는 useEffect를 사용했는데 여기서 에러가 난다면 그것은 CCOmponent의 책임이 아닌 useEffectOnce의 책임으로 넘어간다라는 의미이다.

function useEffectOnce(effect,deps) {
	const onceRef = useRef(false);
	useEffect(() => {
      
      if(!onceRef.current) {
        onceRef.current = true;
        effect();
      }
      
    },[deps]);
}
function CComponent() {
  	
	const [item,setItem] = useState(1);
  
  	useEffectOnce(() => {
      	setItem(2);
    },[]);
  
  	
  	return 
}

결론

사실 위 내용들이 바로 바로 떠오르지는 않는다. 그래서 앞으로는 다음과 같은 절차를 통해서 문제를 해결해나갈 예정이다.

1. 먼저 기능 구현을 우선으로 둔다.
2. 중복되는 로직을 찾아보고 중복이 된다면 커스텀 훅을 이용하여 줄일 수 있는지 확인한다.
3. 더 좋은 패턴이나 방법들이 있는지 검색을 하면서 더 좋은 코드를 만들 수 있도록 한다.