react-simplikit의 유용한 hook들 소개

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")}
/>