Lottie사용 관련

Question

콘솔창에 Lottie 관련으로 경고 메시지 같은게 뜨는데 해당 내용은 어떻게 해야 해결할 수 있나요?
혹시페이지에 문제가 생기지는 않는건가요? 문서를 봐도 무슨 말인지 모르겠네요.

componentWillUpdate has been renamed, and is not recommended for use. See https://react.dev/link/unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.

* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: Lottie2

코배투 · Answer

안녕하세요. 해당 메시지는 React에서 componentWillUpdate 라는 라이프사이클 메서드가 더 이상 권장되지 않는다는 뜻인데요. React 18.x 버전부터는 이 메서드가 완전히 동작하지 않을 수 있으니, 미리 수정하는 것이 좋다는 경고(Not 에러)입니다. 현재 이 경고 메시지 때문에 페이지에 기능적인 문제가 생기지는 않습니다. 경고는 단순히 개발자에게 코드에 잠재적인 문제가 있을 수 있음을 알려주는 역할을 합니다. 즉, 지금은 사이트가 정상적으로 동작하더라도, 미래의 React 버전(특히 18.x 이상)에서는 이 경고가 오류로 바뀔 가능성이 있으니 미리 대응하는 것이 좋다고 알려주는 것입니다. 경고 메시지 해결을 원하신다면, 1. Lottie 라이브러리 업데이트 가장 간단하고 권장되는 방법은 Lottie 라이브러리를 최신 버전으로 업데이트하는 것입니다. - 하는 법 : 1. 프로젝트 폴더에서 터미널을 열고, 현재 Lottie 버전을 확인합니다: npm list lottie-react 2. 최신 버전으로 업데이트합니다: npm install lottie-react@latest 3. 업데이트 후 프로젝트를 다시 실행해서 경고가 사라지는지 확인하세요. 2. React 코드 수정 만약 경고가 Lottie 라이브러리 내부에서 발생한 것이라면, 직접 Lottie 코드를 수정하는 방법도 있습니다. componentWillUpdate 를 componentDidUpdate 로 바꾸거나, UNSAFE_componentWillUpdate 로 이름을 변경하면 됩니다.   3. 자동 수정 명령어 사용 React에서 제공하는 도구를 사용해 프로젝트 전체에서 문제가 되는 코드를 자동으로 수정할 수 있습니다. - 하는 법 : 1. 프로젝트 폴더에서 터미널을 열고 다음 명령어를 입력합니다: npx react-codemod rename-unsafe-lifecycles 2. 명령어가 실행되면 componentWillUpdate 같은 구식 메서드 이름이 자동으로 새로운 이름(예: UNSAFE_componentWillUpdate )으로 바뀝니다. 3. 이후 프로젝트를 다시 실행해서 경고가 사라졌는지 확인하세요.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 이선용님.

React 프로젝트에서 Lottie와 관련하여 경고 메시지를 보셨군요. 이는 React 라이브러리의 컴포넌트 생명주기 메서드 사용과 관련된 경고입니다. componentWillUpdate는 React의 최신 버전에서 UNSAFE_componentWillUpdate로 바뀌었으며, 권장되지 않는 메서드입니다.

요약 설명 및 해결 방법

경고 메시지 원인:
- componentWillUpdate는 React 16.x 버전까지는 정상적으로 활용할 수 있지만, 최신 버전에서는 사용을 권장하지 않으면서 경고 메시지를 출력합니다.
해결 방법:
- React 버전 업데이트 여부 확인: React 16.x 이상 버전에서는 componentWillUpdate를 UNSAFE_componentWillUpdate로 변경하여 사용할 수 있습니다.
- 코드 수정 제안: 데이터 패치나 부수 효과 코드는 componentDidUpdate로 옮기는 것이 좋습니다.
- 자동 수정 도구 사용: 터미널에서 npx react-codemod rename-unsafe-lifecycles 명령을 실행하면 코드 전반의 모든 라이프사이클 메서드를 자동으로 최신 명칭으로 변경할 수 있습니다.

이러한 경고 메시지가 페이지에 직접적인 문제를 일으키진 않지만, 유지보수를 위해 경고를 해결하는 것이 좋습니다. 더 나아가, React 문서의 관련 내용을 읽어보시는 것도 도움이 될 것입니다.

유사한 문제에 대한 추가 학습이 필요하신 경우, 썸네일 리스트 페이지 만들기 함수 질문입니다.을 참고해 보시기 바랍니다. React 환경에서 발생할 수 있는 일반적인 문제를 다루고 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

Lottie사용 관련

요약 설명 및 해결 방법