[react-color] Support for defaultProps 오류

⚠️ 에러 상황

React 18.2.0 버전을 사용하면서 색상 선택 컴포턴트가 필요해서

react-color 패키를 사용했는데 Sketch 컴포넌트를 불러올 때마다 아래와 같은 오류가 떴다..

Sketch: Support for defaultProps will be removed from function components 
in a future major release. Use JavaScript default parameters instead

Checkboard: Support for defaultProps will be removed from function components 
in a future major release. Use JavaScript default parameters instead

 

 

✅ 해결 방법

defaultProps 관련해서 수정도 해보고, 기본값도 줘봤는데도 해결이 안되었다.

react-color 이슈를 살펴보니 나와 비슷한 오류를 가진 사람이 3년 전에 있었고...

해당 코드를 수정해서 PR을 올린 사람이 있었지만 머지는 안해주는 거 같다(merge soon...?)

 

결국 다른 패키지인 @uiw/react-color를 이용해서 해결했다.

npm i @uiw/react-color

나같은 경우에 SketchPicker -> Sketch로만 바꿨는데도 코드가 정상적으로 동작했다.

# 기존 코드
import { SketchPicker } from 'react-color'
...
<SketchPicker color={color} onChangeComplete={handleColorChange} />

# 변경 코드
import { Sketch } from '@uiw/react-color'
...
<Sketch color={color} onChange={handleColorChange} />

react-color 사용하다가 오류가 나는 분들에게 도움이 되기를...🙏

 

 

📋 참고자료

https://github.com/casesandberg/react-color/pull/893

https://www.npmjs.com/package/@uiw/react-color

https://github.com/uiwjs/react-color