Checkbox 구현 - study-pals/frontend GitHub Wiki

요구사항

우리 프로젝트에는 아래 네 가지 형태의 체크박스가 존재하며, 이들을 구현 가능해야 한다.

image

체크박스 라이브러리 조사

React native에서는 체크박스 컴포넌트를 제공하지 않아, 커스텀 라이브러리를 사용해야 한다.

https://reactnative.dev/docs/checkbox

🚧 CheckBox

Removed. Use one of the community packages instead.

RN 커뮤니티에서 상위 두 개의 체크박스 라이브러리를 조사했다.

react-native-bouncy-checkbox

https://github.com/WrathChaos/react-native-bouncy-checkbox

  • ⭐ 840 github stars

졸업 프로젝트에 사용했던 체크박스 컴포넌트이다.

하지만 원형 체크박스만 제공되고, 박스 형태는 제공하지 않아 선택하지 않았다.

react-native-checkbox-reanimated

https://github.com/craftzdog/react-native-checkbox-reanimated

  • ⭐ 180 github stars

필요한 스펙을 모두 갖춘 패키지였으므로 프로젝트에 적용해보기로 했다.

Windows 환경에서의 구동 실패

해당 패키지는 내부적으로 react-native-reanimated를 사용하며 이를 위해 babel.config에 추가 설정을 적용하라고 안내한다.

https://github.com/craftzdog/react-native-checkbox-reanimated

When you're done installing react-native-reanimated don't forget to add the plugin to your babel.config.js file. Like so:

module.exports = {
  presets: [
    ...
  ],
  plugins: [
    ...
    'react-native-reanimated/plugin',
  ],
};

위 설정을 적용하니 안드로이드에서는 잘 작동하나, Windows에서 문제가 있었다.

빌드까지는 정상적으로 완료되지만 번들을 로드하던 중 윈도우 앱이 갑자기 꺼져 버리는 현상이 발생했다.

windows 환경에서 번들링 중 문제가 발생한 것인지, 아니면 컴포넌트 렌더링 시 문제가 있는 것인지 판단하기 위해 아래 세 가지 조건으로 각각 개발 서버를 실행해보았다.

  1. 번들러에서 'react-native-reanimated/plugin' 설정 제거, 화면에 Checkbox 컴포넌트 렌더링 X → 구동 성공
  2. 번들러에 'react-native-reanimated/plugin' 설정 포함, 화면에 Checkbox 컴포넌트 렌더링 X → 구동 성공
  3. 번들러에 'react-native-reanimated/plugin' 설정 포함, 화면에 Checkbox 컴포넌트 렌더링 O → 구동 실패

→ 컴포넌트를 화면에 렌더링하려 할 때 발생하는 문제임을 알 수 있었다.

실패 원인: react-native-reanimated의 윈도우 미지원 문제

좀더 조사해보니, react-native-reanimated 는 윈도우를 지원하지 않는다는 사실을 발견했다..

https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting/?utm_source=chatgpt.com

  1. Check if your platform is supported by Reanimated. Currently we support:
    • Android
    • iOS
    • macOS
    • Web

따라서 해당 패키지는 사용하지 못한다.

react-native-community/checkbox

https://github.com/react-native-checkbox/react-native-checkbox

  • ⭐ 377 github stars Android, iOS, Windows를 공식 지원하는 체크박스 라이브러리이다.

하지만 프로젝트에 적용 후 Windows 빌드에 실패했다.

Success: No auto-linking changes necessary. (632ms)
 ✔ Found Solution: D:\projects\studyPals\windows\studyPals.sln
 ℹ Build configuration: Debug
 ℹ Build platform: x64
 ✖ Building Solution: RNSVG.vcxproj -> D:\projects\studyPals\windows\x64\Debug\RNSVG\RNSVG.dll...
 ✖ Build failed with message 3:10>D:\Program Files\Microsoft\VisualStudio\MSBuild\Microsoft\VC\v170\Microsoft.Cpp.WindowsSDK.targets(46,5): error MSB8036: Windows SDK 버전 10.0.18362.0을(를) 찾
을 수 없습니다. 필요한 버전의 Windows SDK를 설치하거나, 솔루션을 마우스 오른쪽 단추로 클릭하고 [솔루션 대상 변경]을 선택하거나 프로젝트 속성 페이지에서 SDK 버전을 변경하세요. [D:\projects\studyPals\node_modules\@react-native-community\checkbox\windows\CheckboxWindows\CheckboxWindows.vcxproj]. Check your build configuration.

만약 Windows에서의 위 문제를 해결한다 해도, macos는 지원 목록에서 찾아볼 수 없으므로 macos 환경에서도 여전히 문제가 생길 소지가 있다. 다른 패키지를 찾아보기로 했다.

@futurejj\react-native-checkbox

생성된지 얼마 안 된(현 시점에서 2주 전쯤) 마이너한 패키지이지만, 애니메이션이 꽤 잘 구현되어 있어 적용을 시도해보았다. 결론부터 말하면 실패했고, 그 이유는 아래와 같다.

image

getStyles 함수의 모듈을 import하지 못한 것으로 보이는데, 아마 상대 경로 문제일 것으로 보인다. 문제의 코드는 아래와 같다.

// node_modules\@futurejj\react-native-checkbox\lib\module\index.js
...

import { getStyles } from "./styles.js";
...

// Get styles based on size
  const styles = useMemo(() => getStyles(size), [size]);
  const {
    current: scaleAnim
  } = useRef(new Animated.Value(1));
...

에디터 상에서 Typescript는 이에 대해 별도의 에러를 출력하지 않으므로 런타임에서의 문제이고, 원인은 metro 내부에서 불명의 이유로 인해 해당 패키지의 import 구조가 꼬인 것이 아닐까 싶다.

해당 패키지는 general한 패키지가 아니고 단지 한 유저가 만들어낸 패키지이다. 내가 이 패키지 설정을 뜯어고쳐 문제를 해결한다 해도 네 가지 플랫폼에서 일관적으로 동작할 수 있을지는 여전히 미지수이므로, 그냥 내가 새로 만드는 게 낫겠다고 판단했다.

커스텀 체크박스 라이브러리 제작

@futurejj\react-native-checkbox 구현을 살펴보니, RN의 Animated API를 사용하고 있었다. 해당 API는 React Native 위에서 구현된 만큼 Windows 및macos에서도 문제없이 작동할 것이므로, @futurejj\react-native-checkbox의 구현을 참고하여 새로운 체크박스 컴포넌트를 만들었다.

https://github.com/user-attachments/assets/6dbf330d-d749-4eca-a533-b0ef20a26eb6