[TIL - 2022.9.29] Custom Hooks, Code Spliting

Custom Hook

작업을 하다보면 컴포넌트의 크기가 점점 커지게 되면 유지보수나 디버깅이 상당히 힘들어진다.

이럴 때 Custom Hook을 이용하여 여러 파일로 쪼개면 오류가 날 시 발견하기 쉬워진다.

import { useCallback, useState } from 'react';
// Usage
function App() {
    // Call the hook which returns, current value and the toggler function
    const [isTextChanged, setIsTextChanged] = useToggle();
    
    return (
        <button onClick={setIsTextChanged}>{isTextChanged ? 'Toggled' : 'Click to Toggle'}</button>
    );
}
// Hook
// Parameter is the boolean, with default "false" value
const useToggle = (initialState = false) => {
    // Initialize the state
    const [state, setState] = useState(initialState);
    
    // Define and memorize toggler function in case we pass down the component,
    // This function change the boolean value to it's opposite value
    const toggle = useCallback(() => setState(state => !state), []);
    
    return [state, toggle]
}

출처 : https://usehooks.com/

사이트 이름에서도 알 수 있듯이 앞부분이 use로 시작된다. 이게 첫번째 규칙이다.

두번째로 조건부로 리턴하지 말라고 하는데 사이트를 좀 살펴보니 값을 리턴 혹은 배열에 담아서 리턴하거나 JSX 코드를 리턴하고 있다.(Hook을 사용할 시)

근데 어떤 이유에서 조건부 리턴을 하지 말라는지는 아직까지 확신이 안 서는 것 같다.
Custom Hook을 한번 호출할 때 한 개(?)의 값만 호출해서 그런가...?

Code Spliting

예를 들어 라이브러리를 갖다쓴다고 할 때 모듈 전체를 불러와서 그 안에 들어있는 메소드를 사용하게 된다면 불러오는 모듈의 양이 클 경우 상당히 비효율적이다.

그래서 필요한 것만 불러와서 쓰는게 더 효율적이다.

dynamic import와 React.lazy, Suspense는 아직까지 개념이 제대로 안 잡혀서 이후 포스팅에서 정리해볼 생각이다.