投稿した質問数 1

0

React 버전입니당
로딩쪽은 뛰어넘고 실습 중에 있어요

npm uninstall react-lottie
npm install lottie-react

import Lottie from "lottie-react";
import animationData from "../../assets/loading-animation.json";

function Loading() {
  return (
    // div로 감쌀 필요 없이 바로 스타일 적용 가능
    <div style={{ width: 300, height: 300, margin: "0 auto" }}> 
      <Lottie 
        animationData={animationData} 
        loop={true} 
        autoplay={true} 
      />
    </div>
  );
}

export default Loading;

0

안녕하세요.

우선 버전 체크를 위해 현재 React 버전을 package.json에서 확인 후 알려주실 수 있을까요?

0

lottie는 잘 받아져있는거 같고 loading-animation.json 파일 경로도 맞는거 같아요 근데 오류 코드로 콘솔 창엔 밑에 처럼 나오고

현재 Loading.jsx 코드는

import Lottie from "react-lottie";
import animationData from "../../assets/loading-animation.json";

function Loading() {
    const defaultOptions = {
        loop: true,
        autoplay: true,
        animationData: animationData.default,
        rendererSettings: {
            preserveAspectRatio: "xMidYMid slice",
        },
    };
    // return <div>Loading</div>
    return <Lottie options={defaultOptions} />;
}

export default Loading;

이렇습니다

0

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

현재 경험하신 문제는 리액트 컴포넌트인 Lottie의 사용에 있어 발생하는 오류로 보입니다. 주어진 에러 메시지에 따르면, React가 예상하지 않은 형식의 요소를 렌더링하려고 시도할 때 발생하는 오류입니다. 이는 주로 렌더링하려는 컴포넌트가 제대로 정의되지 않거나 가져오기가 잘못되었을 때 발생합니다.

문제 해결을 위한 접근 방법

1. Lottie 라이브러리 설치 확인:
   

react-lottie 패키지가 프로젝트에 올바르게 설치되었는지 확인합니다. 프로젝트 루트에서 터미널을 열고 다음 명령어를 실행해보세요:

   npm install --save react-lottie

2. JSON 파일 경로 확인:
   

animationData로 가져온 JSON 파일이 올바른 위치에 있는지 확인하세요. 경로가 잘못되었거나 다른 위치에 있을 수 있습니다.

3. Lottie 사용 방법 검토:
   

Lottie 컴포넌트를 사용할 때 defaultOptions의 설정 값과 함께 사용하는지 확인하셔야 합니다. 다음은 일반적인 구문 예시입니다:

   import Lottie from 'react-lottie';
   import animationData from '../assets/loading-animation.json';

   const defaultOptions = {
     loop: true,
     autoplay: true,
     animationData: animationData,
     rendererSettings: {
       preserveAspectRatio: 'xMidYMid slice',
     },
   };

   const Loading = () => {
     return <Lottie options={defaultOptions} />;
   };

   export default Loading;

4. Stack Trace 분석:
   

에러 메시지에 제공된 스택 트레이스(stack trace)를 잘 살펴보세요. 문제의 근원이 되는 파일과 행을 추적하여 잘못된 코드가 있는지 확인합니다.

5. Error Boundary 사용:
   

React의 오류 경계를 사용하여 이러한 렌더링 오류를 좀 더 깔끔하게 처리할 수 있습니다. 이를 통해 어플리케이션의 일부에서 오류가 발생해도 전체가 중단되지 않도록 할 수 있습니다. Error Boundary에 대한 React 문서를 참고하세요.

위의 단계를 통해 문제를 해결해 보시고, 계속해서 문제가 발생한다면 추가적인 콘솔 로그나 문제 상황을 조금 더 공유해 주세요.

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