[URH-20] useToggle 신규

[suhyeoonn]

👾 Pull Request

• 작업명: useToggle 추가

• 티켓: useToggle 신규

• 상태: 신규

1️⃣ Spec

• boolean 상태를 토글하거나, 전달된 값으로 상태를 설정할 수 있습니다.
• 상태 변경 시 전달된 값이 boolean이 아닐 경우 현재 상태를 기준으로 토글합니다.
• 초기값은 boolean만 받을 수 있습니다.

2️⃣ 변경 사항

• 없음

3️⃣ 예시 코드

function App() {
  const [state, toggle] = useToggle(true);

  return (
    <div>
      <div>{state ? 'ON' : 'OFF'}</div>
      <button onClick={toggle}>Toggle</button>
      <button onClick={() => toggle(true)}>set ON</button>
      <button onClick={() => toggle(false)}>set OFF</button>
      <button onClick={() => toggle('something')}>set something (Also toggle)</button>
    </div>
  );
}

4️⃣ 관련 문서 (선택 사항)

• 없음

🙋‍♀️ 질문

다른 코드 참고해보니, useWindowSize.test.ts 테스트코드가 hooks 폴더에 있어 우선 동일하게 해당 폴더에 추가했습니다.
그런데, react-use처럼 tests 폴더로 분리해서 관리한다면 실제 코드와 테스트 코드를 명확히 구분할 수 있어 좋을 것 같아서요.
/tests 폴더 생성 후 여기로 useToggle.test.ts 파일을 이동해도 될지 문의드립니다!

[bicochan]

[P1] useToggle은 boolean 타입의 값만 인자로 받을 수 있는데 boolean 타입이 아닌 값은 어떻게 받을 수 있는지, 또 반댓값은 어떻게 반환되는지 궁금합니다.

예를 들어, 'a'라는 문자열이 들어오면 어떻게 작동하나요?🤔

테스트 코드를 추가해 주시거나 설명을 부탁드려도 될까요?🙏🏻

[suhyeoonn]

앗 초기 값은 boolean 타입만 받을 수 있고, 이후 상태 변경 시 다른 타입도 받을 수 있습니다!
PR 내용을 제가 헷갈리게 적은 것 같아 전달된 값이 boolean이 아니면 현재 상태를 기준으로 토글합니다. 를 상태 변경 시 전달된 값이 boolean이 아닐 경우 현재 상태를 기준으로 토글합니다. 로 수정했습니다!

상태 변경 함수에서 받은 값이 boolean이 아닌 경우에 대해서는 boolean 타입이 아닐 경우 기존값 토글 테스트 코드를 작성하였습니다~!

[bicochan]

아, dispatch로 들어온 인자를 말씀하신 거군요!

혹시 nextValue를 타입을 제한하지 않으신 이유가 있을까요?

useToggle이 boolean 값을 제어하는 훅이라면 nextValue도 타입을 제한하는 게 더 안전하지 않을까 생각되어서 여쭤봅니다.

[suhyeoonn]

nextValue는 런타임 시 결정될 수 있기 때문에, 인자를 boolean 타입으로만 제한할 경우 만약 잘못된 타입이 들어오면 기능 동작에 문제가 생길 수도 있을 것 같아 타입을 제한하지 않았습니다.
예를 들어 서버 데이터 기반으로 토글 값이 설정되도록 구현된다면 백엔드에서 데이터 타입이 변경될 경우 프론트도 영향을 받을 것 같아서요!

말씀해 주신 대로 nextValue의 타입을 boolean으로 제한하는 것도 좋은 방법일 것 같아서, 그렇게 수정해도 괜찮을까요? 추가적인 피드백 주시면 반영하겠습니다!

[bicochan]

아하...! 백엔드 영역까지 고려한 설계였군요... 멋져요 수현 님! 👍🏻👍🏻
유연하고 안전한 설계를 하신 거라면 굳이 수정할 필요는 없을 것 같습니다!

추후에 useToggle을 useSwitch와 같은 훅으로 확장시켜봐도 좋을 것 같다는 생각이 드네요 ㅎㅎ
사용자가 토글링하고자 하는 값을 직접 지정할 수 있게 말이죠😎

[bicochan]

아하...! 백엔드 영역까지 고려한 설계였군요... 멋져요 수현 님! 👍🏻👍🏻
유연하고 안전한 설계를 하신 거라면 굳이 수정할 필요는 없을 것 같습니다!

추후에 useToggle을 useSwitch와 같은 훅으로 확장시켜봐도 좋을 것 같다는 생각이 드네요 ㅎㅎ
사용자가 토글링하고자 하는 값을 직접 지정할 수 있게 말이죠😎

[foresec]

앗 늦게나마 리뷰를 남깁니다. 수고 많으셨어요👍👍