useBooleaState
useState()를 통해 boolean 상태를 관리한다면, useBooleanState()를 통해 boolean 값이 변할 때 어떤 영향이 발생하는지 맥락을 파악하기 좋다.
구현
function useBooleanState(initialValue: boolean){ const [ booleanState, setBooleanState ] = useState(initialValue); const setTrue = useCallback(() => { setBooleanState(true); }, [ setBooleanState ]); const setFalse = useCallback(() => { setBooleanState(false); }, [ setBooleanState ]); return [ booleanState, setTrue, setFalse ]; } useToggle
useState()로 상태를 만들 때 boolean 값 전환이 toggle에만 관심있다면, useToggle을 사용해볼 수 있다.
구현
function useToggle(initialValue: boolean){ const [ booleanState, setBooleanState ] = useState(initialValue); const toggleBooleanState = useCallback(() => { setBoolean((prev) => !prev); }, [ setBoolean ]); return [ booleanState, toggleBooleanState ]; } 예시
const [ filterText, setFilterText ] = useState(''); const [ inStockOnly, toggleInStockOnly ] = useToggle(false); return <SearchBar filterText={filterText} onFilterTextChange={setFilterText} inStockOnly={inStockOnly} onInStockOnlyToggle={toggleInStockOnly} /> SwitchCase
조건부 렌더링을 해야하는데, 조건을 특정 변수/상수의 값에 따라 분기해야할 경우에 사용할 수 있다.
구현
function SwitchCase({ value, caseBy, defaultCase }) { const case = caseBy[value]; if (render != null) { return <>{case()}</> } return defaultCase ? <>{defaultCase()}</> : null; } 예시
const environment = useEnvironment(); return <SwitchCase value={environment} caseBy={{ desktop: () => <DesktopCard /> tablet: () => <TabletCard /> mobile: () => <MobileCard /> }} defaultCase={() => throw new Error("unknown environment")} /> 
Top comments (0)