[React-Native] Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

박종준·2024년 1월 17일
0

React Native

목록 보기
2/18

React-Native 에서 작업하는 도중, react-native-action-button 라는 컴포넌트를 사용하여 ActionButton 기능을 보여줄때, 다음과 같은 에러를 발생했습니다.

(라이브러리: https://github.com/mastermoo/react-native-action-button)

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

에러가 발생하는 이유는 라이브러리에서 사용되던 componentWillReceiveProps 기능이 UNSAFE_componentWillReceiveProps 기능으로 이름이 바뀌면서 버전 17버전부터는 사용이 중단되고 새로운 이름만 작동하도록 변경되었기 때문입니다.

콘솔에 에러문구가 나온 내용을 읽고, 권장하는 방법대로 터미널에 다음 코드를 작성하였으나 해결되지 않았습니다.

npx react-codemod rename-unsafe-lifecycles

구글링을 통해 공식문서를 확인해본 결과, 다음 내용을 확인해볼 수 있었습니다.

버전 17로 업데이트가 된 이후로 componentWillReceiveProps 기능은 사용할수 없다고 하여, 문제였던 컴포넌트인 react-native-action-button 컴포넌트의 디렉토리를 찾아 코드를 수정하였더니 에러가 사라지고 정상적으로 동작하는걸 확인할수 있었습니다.

componentWillReceiveProps -> componentDidUpdate

(제 프로젝트 기준으로 ActionButton.js 라는 파일에서 42번째 줄에 코드가 위치해있어 수정해주니 에러가 해결되었습니다.😌)

profile
작은 아이디어로 세상을 변화시키고 싶습니다.

0개의 댓글