공용 폴더의 스타일을 사용하는 React Router와 관련된 주요 문제는 스타일을 추적하고 올바르게 적용되었는지 확인하기 어려울 수 있다는 것입니다. 공용 폴더는 React 구성 요소 트리의 일부가 아니므로 어떤 스타일이 언제 적용되는지 알기 어려울 수 있습니다. 또한 여러 구성 요소가 공용 폴더에서 동일한 스타일을 사용하는 경우 발생하는 문제를 디버깅하기 어려울 수 있습니다.
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { createGlobalStyle } from 'styled-components';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
const GlobalStyle = createGlobalStyle`
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code { font-family: sourcecode pro, Menlo, Monaco, Consolas, Courier New, monospace; }
*{ boxsizing: borderbox;}
img{ maxwidth: 100%;}
a{ textdecoration : none;} `; // Global styles for the entire app. This will be applied to all components.
const App = () => ( // The main component of the app. This is where all routes are defined. <Router> <div> <GlobalStyle /> <Route exact path="/" component={HomePage} /> <Route path="/about" component={AboutPage} /> </div> </Router> ); export default App;
1. 'react'에서 React 가져오기; // React 라이브러리 가져오기
2. 'react-router-dom'에서 { BrowserRouter as Router, Route } 가져오기; // react-router-dom 라이브러리에서 BrowserRouter 및 Route 컴포넌트 가져오기
3. 'styled-components'에서 { createGlobalStyle } 가져오기; // styled-components 라이브러리에서 createGlobalStyle 함수 가져오기
4. './pages/HomePage'에서 홈페이지 가져오기; // 홈페이지 컴포넌트 가져오기
5. './pages/AboutPage'에서 AboutPage 가져오기; // AboutPage 컴포넌트 가져오기
6. const GlobalStyle = createGlobalStyle`…`; // 전체 앱의 전역 스타일. 이것은 모든 구성 요소에 적용됩니다.
7. const 앱 = () => (…); // 앱의 주요 구성 요소입니다. 여기에서 모든 경로가 정의됩니다.
8.
9.
10 기본 앱 내보내기;// 앱을 기본으로 내보내기
스타일 사용
스타일은 React Router에서 애플리케이션의 모양과 느낌을 사용자 정의하는 데 사용할 수 있습니다. 스타일을 사용하여 사용자 지정 구성 요소를 만들고 애니메이션을 추가하는 등의 작업을 수행할 수 있습니다. 스타일을 사용하여 다양한 화면 크기에 적응하는 반응형 레이아웃을 만들 수도 있습니다. 또한 스타일을 사용하여 사용자가 자신의 경험을 사용자 지정할 수 있는 응용 프로그램의 테마를 만들 수 있습니다.
공용 폴더 사용
React Router의 공용 폴더는 이미지, CSS 및 JavaScript와 같은 정적 파일을 저장하는 데 사용할 수 있는 특수 폴더입니다. 이러한 파일은 React 애플리케이션에서 처리하지 않고 공용 폴더에서 직접 제공됩니다. 이를 통해 로딩 시간이 단축되고 애플리케이션의 여러 페이지에서 자산을 보다 쉽게 관리할 수 있습니다. 또한 공용 폴더는 Git와 같은 버전 제어 시스템에서 특정 파일을 보호하는 방법을 제공하여 보안 및 개인 정보를 유지하는 데 도움이 될 수 있습니다.
React의 공용 폴더에서 CSS 파일을 어떻게 가져오나요?
React Router에서는 Link 컴포넌트를 사용하여 public 폴더에서 CSS 파일을 가져올 수 있습니다. Link 구성 요소를 사용하면 href 속성에서 파일 경로를 지정할 수 있습니다. 예를 들어:
이것은 공개 폴더에서 React Router 애플리케이션으로 styles.css 파일을 가져옵니다.
