[React] Custom Hook 만들 때 주의사항

리액트에서 custom hook을 만들어서 사용해야하는 경우가 꽤 많다. 하지만, 규칙을 잘 알지 못하면 답답한 에러들을 마주하게 된다.

Rule 1 : Custom Hook의 함수명은 첫 글자를 대문자로 하거나 "use"를 붙혀서 구성해야한다

export function FetchData(url){
	const [data, setData] = useState();
    
    useEffect(() => {
    	axios.get(url).then((response) => {
        	setData(response.data)
            })
    }, [url]);
    
    return data;
}

or

export function useFetchData(url){
	const [data, setData] = useState();
    
    useEffect(() => {
    	axios.get(url).then((response) => {
        	setData(response.data)
            })
    }, [url]);
    
    return data;
}

위 custom hook 함수들과 같이 맨 앞 글자가 대문자인 "DataHandler" 또는 "use"를 맨 앞에 붙여 "useDataHandler"로 함수명을 구성해야 규칙에 어긋나지 않는다.

Rule 2. Custom hook을 사용할 때 if문 안에서 사용하지 않는다.

리액트에서는 이전 렌더링과 현재 렌더링을 비교하여 호출된 react hook의 개수나 종류가 다르면 에러를 호출한다. 그렇기 때문에 if 문을 사용해야한다면 custom hook 내부 useEffect hook 내에서 if문을 작성하자.

잘못된 예시 😡

function drawData(url: string | undefined){
	const [graphData, setGraphData] = useState();
    
	if (url){
    	const fetchedData = useFetchData(url);
        setGraphData(fetchedData);
    }
    
    return <LineChart data={graphData}/>
}

custom hook인 useFetchData를 if 문을 통해서 호출하면 안된다.

올바른 예시 😇

function drawData(url: string | undefined){
	const [graphData, setGraphData] = useState();
    
	const fetchedData = useFetchData(url);
    setGraphData(fetchedData);
    
    return <LineChart data={graphData}/>
}

export function useFetchData(url){
	const [data, setData] = useState();
    
    useEffect(() => {
    	if(url){
          axios.get(url).then((response) => {
              setData(response.data)
          })
        }
    }, [url]);
    
    return data;
}

위 코드와 같이 custom hook의 useEffect 내부에서 if문을 작성한다.