[커스텀 Hooks] 코드가 반복되는 것을 느낀다면 사용하자

여러 컴포넌트를 만들다 보면 반복되는 코드를 발견할 수 있을 것이다.

 

반복되는 것을 줄여주면 코드가 훨씬 깔끔하고 보기 좋아지기 때문에 커스텀 Hooks를 만들어 보고자 한다.

 

내가 발견한 반복되는 코드는 GET api 요청하는 로직이다.

주로 api 요청 후 얻어오는 데이터를 사용해서 뷰를 만들어 준다.

 

const [ data, setData ] = useState('');

const getData = async () => {
	try {
    	const res = await axios.get('url 주소');
        setData(res);
    } catch(err) {
    	console.log(err)
    }
};

useEffect(() => {
	getData();
}, []);

위의 코드처럼 getData함수를 이용해서 data를 얻은 후 렌더링에 사용한다. 

 

주로 이렇게 데이터를 받아오는 부분이 각 페이지마다 반복되는 것을 느낄 수 있는데 이것을 커스텀 훅으로 만들어 보았다.

 

const useGetData = (url) => {
	const [ url, setUrl ] = useState(url);
	const [ data, setData ] = useState('');    

	
	const getData = async () => {
		try {
    			const res = await axios.get('url 주소');
        		setData(res);
    		} catch(err) {
    			console.log(err)
    		}
	};

	useEffect(() => {
		getData();
	}, [url]);
    
    return [data];
}

export default useGetData

커스텀 Hooks의 이름은 꼭 use로 시작하도록 작명한다.

 

커스텀 Hooks은 useState, useEffect등 사용하고 싶은 Hooks를 원하는 동작을 하도록 커스텀해서 사용하면 된다.

 

작성한 커스텀 Hook을 사용하는 방법은 아래와 같다.

 

const App = () => {
	const [ data ] = useGetData('url주소');
    
    return <div>{data}</div>;
}

 

물론 커스텀 훅을 사용하지 않아도 개발은 가능하다.

 

하지만 실제 프로젝트를 하다보면 많은 커스텀 훅을 만날 것이며 사용하게 될 것이다.

 

클린 코드, 읽기 좋은 코드를 위해서 커스텀 훅을 꼭 사용해 보길 바란다.

 

아직 낯설지만 점점 사용하다보면 익숙해질 것이다.