React Router에서 정적 스타일을 사용하는 것과 관련된 주요 문제는 다양한 경로와 관련 스타일을 추적하기 어려울 수 있다는 것입니다. 정적 스타일을 사용하면 각 경로에 고유한 CSS 규칙 집합이 있어야 하므로 빠르게 다루기 힘들고 유지 관리가 어려워질 수 있습니다. 또한 스타일이 여러 경로에서 사용되는 경우 모든 경로에서 중복되어야 하므로 DRY(Don't Repeat Yourself) 코드를 유지하기가 어렵습니다.
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import styled from 'styled-components';
const StyledLink = styled(Link)`
color: palevioletred;
font-weight: bold;
&:hover {
color: white;
text-decoration: none;
}
`;
const App = () => ( <Router> <div> <ul> <li><StyledLink to="/">Home</StyledLink></li> <li><StyledLink to="/about">About</StyledLink></li> </ul> <hr /> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> </div> </Router>) ;
const Home = () => ( <div> <h2>Home</h2> </div>) ;
const About = () => ( <div> <h2>About</h2> </div>) ;
export default App;
1. 첫 번째 줄은 React 라이브러리를 가져옵니다.
2. 두 번째 줄은 react-router-dom 라이브러리에서 BrowserRouter, Route 및 Link 구성 요소를 가져옵니다.
3. 세 번째 줄은 styled-components 라이브러리에서 스타일이 지정된 구성 요소를 가져옵니다.
4. 네 번째 줄은 react-router-dom에서 가져온 Link 구성 요소를 사용하여 StyledLink 구성 요소를 만들고 color: palevioletred 및 font-weight: bold와 색상을 흰색으로 변경하고 모든 텍스트를 제거하는 hover 효과로 스타일을 지정합니다. 마우스를 올렸을 때의 장식.
5. 다섯 번째 줄은 내부에 두 개의 Route 구성 요소(하나는 Home용, 다른 하나는 About용)가 있는 Router 구성 요소를 렌더링하는 App 구성 요소를 만듭니다. 또한 위의 4행에서 생성된 StyledLink 구성 요소를 사용하여 두 링크(Home 및 About)의 정렬되지 않은 목록을 렌더링하며 스타일 지정을 위해 hr 태그로 구분됩니다.
6. Line 8 – 11은 Home 및 About이라는 두 개의 기능적 구성 요소를 생성합니다. 이 구성 요소는 둘 다 위의 Line 2에 있는 각각의 Route 구성 요소에 의해 호출될 때 내부에 각각의 이름이 있는 h5 태그를 렌더링합니다(Home은 "Home"을 렌더링하고 About은 "About"을 렌더링함). ).
7. 마지막으로 12행은 필요한 경우 애플리케이션의 다른 곳에서 사용할 수 있도록 App 구성 요소를 내보냅니다.
정적 스타일
React Router의 정적 스타일은 구성 요소에 적용되는 스타일이며 구성 요소의 상태 또는 소품 변경에 관계없이 동일하게 유지됩니다. 이는 구성 요소의 상태 또는 소품에 따라 변경되는 동적 스타일과 대조됩니다. 정적 스타일을 사용하여 애플리케이션 전체에서 일관된 모양과 느낌을 생성할 수 있을 뿐만 아니라 변경 사항이 있을 때마다 구성 요소를 수동으로 조정하지 않고도 개발자가 신속하게 구성 요소의 스타일을 지정할 수 있는 쉬운 방법을 제공할 수 있습니다.
스타일 컴포넌트 패키지
Styled-components는 개발자가 React 애플리케이션에서 구성 요소 수준 스타일을 만들고 관리할 수 있도록 하는 React Router용 인기 패키지입니다. 단일 구성 요소로 범위가 지정된 CSS 코드를 작성하는 쉬운 방법을 제공하므로 유지 관리 및 디버그가 더 쉬워집니다. Styled-components를 사용하면 여러 구성 요소에서 스타일을 더 쉽게 공유할 수 있을 뿐만 아니라 테마 지정을 지원할 수 있습니다. 또한 styled-component는 React Router의 Link 구성 요소와 함께 사용할 수 있으므로 개발자가 애플리케이션 내에서 링크 스타일을 지정할 수 있습니다.
정적 스타일을 사용하는 방법
정적 스타일은 inline style 속성을 사용하여 React Router에서 사용할 수 있습니다. 이 특성을 사용하면 별도의 스타일시트 없이 요소에 직접 스타일을 적용할 수 있습니다. React Router에서 정적 스타일을 사용하려면 스타일 개체를 만든 다음 구성 요소의 스타일 소품에 대한 인수로 전달해야 합니다. 예를 들어:
const myStyle = {
배경색: '#f2f2f2′,
글꼴 크기: '20px',
색상: '#000'
};
