[241005 TIL] 컴포넌트를 커스텀 훅으로 제공하기

여기 에 작성했던 내용중 부족한 내용이 있었습니다.

컴포넌트와 값을 반환하는 커스텀 훅 사용시 주의사항을 다시 정리합니다.

1. useCallback 사용

리렌더링 통제가 어렵습니다.
반환할 컴포넌트를 useCallback 처리합니다.

function usePreferTheme({ mode }: UsePreferThemeProps) { 
    const [selectedTheme, setSelectedTheme] = useState<string[]>([]); 
    const handleThemeChange = () => {
        // setSelectedTheme() 어쩌구 등등..
    }

    // useCallback 사용!
    const PreferThemeToRender = useCallback(() => { 
        return ( 
            <PreferTheme 
                selectedTheme={selectedTheme} 
                handleThemeChange={handleThemeChange} 
                mode={mode} 
            /> 
        ); 
    }, [/* 의존성 */]); 

    return [PreferThemeToRender, selectedTheme]; 
}; 
export default usePreferTheme;

 

 

2. 사용할 때는 함수호출로

이 부분이 제가 실수했던 부분입니다.

<PreferThemeToRender /> 이렇게 컴포넌트처럼 사용하면 안됩니다.

 

PreferThemeToRender는 일반 함수로서 JSX를 반환하고 있습니다.
즉, 이 함수는 단순히 JSX를 반환하는 함수이지 React 컴포넌트가 아닙니다.

 

React 컴포넌트는 대문자로 시작하는 함수나 클래스일 수 있지만,
여기서 반환하는 것은 함수 그 자체이므로, JSX를 얻기 위해 함수 호출을 해야 합니다.

function App() {
    const [PreferThemeToRender, selectedTheme] = usePreferTheme({mode});

    return (
        <>
            {/* 반드시 아래처럼 */}
            {PreferThemeToRender()}
        </>
    )

}