리액트 코드 스플리팅

코드로 배우는 React with 스프링부트 API서버

공통레이아웃설정

24.10.09 10:00 작성

맨 처음 리액트 코드스플리팅 에서 막히는데요,,,ㅠㅠ

강의 내용이랑 똑같이 했는데 막히는데 한번봐주실수있으실까요??

그리고 코드를 작성하고 리액트화면을 그냥 새로고침하면 코드가적용이되는게 맞죠? 제가하면 지금 mainPage div만 나오고 나머지는 나오지않아서요

import { Suspense, lazy } from "react";
import { createBrowserRouter } from "react-router-dom"; // require 대신 import로 수정

const Loading = <div>Loading...</div>;
const Main = lazy(() => import("../pages/mainPage")); // lazy 게으르다 -> 코드 스플리팅
const About = lazy(() => import("../pages/about")); // lazy 게으르다 -> 코드 스플리팅

const root = createBrowserRouter([
  {
    path: '', 
    element: <Suspense fallback={Loading}><Main /></Suspense>
  },
  {
    path: 'about', 
    element: <Suspense fallback={Loading}><About /></Suspense>
  }
]);

export default root;

import React from 'react'
import { Link } from 'react-router-dom'

const mainPage = () => {
  return (
    <div className = 'text-3xl'> 


    <div className={'flex'}>
      <Link to ={'/about'}>About</Link>
      </div>
    <div>mainPage</div>     
    </div>
  )
}

export default mainPage

import React from 'react'
import { Link } from 'react-router-dom'

const about = () => {
  return (
    <div className={'text-3xl'}>


    <div className={'flex'}>
      <Link to ={'/about'}>About</Link>
     </div>

       <div>About page</div>
      
    </div>
  )
}

export default about

import React from 'react'
import { RouterProvider } from 'react-router-dom'
import root from './router/root'

const App = () => {
  return (
    <RouterProvider router={root} />
  )
}

export default App

react spring-boot jpa jwt redux-toolkit

답변 3

김우철

질문자

2024. 10. 10. 09:42

아....제가 vs코드를 오랜만에써서

코드 저장을안했습니다.....하하..죄송합니다...

구멍가게코딩단

지식공유자

2024. 10. 09. 14:02

설정에 문제가 없다면 '/about' 경로를 호출했을 때 AboutPage 컴포넌트가 보여져야 합니다.

해결이 안되시면

프로젝트에서 node_modules 폴더를 삭제한 후에 프로젝트를 올려주시면 살펴볼 수 있습니다.

https://drive.google.com/drive/folders/1ZLHRKaXx8Ou8kZNd1WE6qALxq_wJODXW

인프런 AI 인턴

2024. 10. 09. 10:06

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

김우철님, 리액트의 코드 스플리팅과 관련하여 질문 주신 내용을 확인하였습니다. 리액트에서 코드 스플리팅을 이용하여 페이지를 동적으로 로드할 때, 새로고침 후 화면에 원하시는 페이지가 제대로 나타나지 않는 문제를 경험하고 계신 것 같습니다.

현재 작성해주신 코드의 구조를 보면, createBrowserRouter를 통해 라우터를 설정하고, Suspense를 통해 로딩 화면을 구현하려는 점이 잘 보입니다. 다만 특정 조건하에서 코드가 예상대로 작동하지 않을 수 있는데, 여기에 몇 가지 점검 사항과 해결 방법을 말씀드리겠습니다.

체크해 볼 사항:

파일 및 경로 확인: import 경로와 파일명이 정확히 일치하는지 확인해 주세요. JavaScript에서 파일명은 대소문자를 구분하기 때문에, mainPage와 about 컴포넌트 파일명이 정확히 맞는지 확인해주세요.
컴포넌트 이름 대소문자: 리액트 컴포넌트는 대문자 시작이 관례입니다. mainPage와 about 컴포넌트의 선언부에서 첫 글자를 대문자로 수정해보세요.
리액트 초기 설정: create-react-app 등으로 프로젝트를 생성했다면, 이는 기본적으로 서비스 워커 등을 설정하기 때문에 HTTP에서 lazy load 시에 문제가 발생할 수 있습니다. 개발 서버를 잘 운영 중인지 확인해 주세요.
라우터 설치 여부 확인: react-router-dom 패키지가 제대로 설치되어 있어야 하며, 버전 호환성 문제도 종종 있을 수 있는 점 체크해 주세요.

코드 수정 예시:

// mainPage.js와 about.js 파일에서 컴포넌트 이름을 대문자로 시작
const MainPage = () => {
  return (
    <div className='text-3xl'>
      <div className={'flex'}>
        <Link to={'/about'}>About</Link>
      </div>
      <div>mainPage</div>
    </div>
  );
};

export default MainPage;

const About = () => {
  return (
    <div className={'text-3xl'}>
      <div className={'flex'}>
        <Link to={'/'}>Home</Link>
      </div>
      <div>About page</div>
    </div>
  );
};

export default About;

참고 문서 및 관련 링크:

아래 유사한 질문에 대한 기존 답변을 참고하시기 바랍니다:
- React에서 코드 스플리팅 이슈 해결 방법: 코드 스플리팅 및 라우팅 문제를 다룬 유사 질문입니다.

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

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