리액트 TIL

sohyun·2022년 10월 11일
0

TIL

목록 보기
2/2

리액트 css-reset 하기

  • styled-components 설치하기
  • styled-reset 패키지 설치하기
  • 기본적인 컴포넌트 생성하기
  • GlobalStyles.js 생성하기
//예시
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset'; 

const GlobalStyles = createGlobalStyle` 
    ${reset}
    a{
        text-decoration: none;
        color: inherit;
    }
    *{
        box-sizing: border-box;
    }
    body {
        font-family: -apple-system;
        color: white;
        padding-top: 50px;
    }
`;

export default GlobalStyles;
  • App.js에 GlobalStyles import
// App.js
import GlobalStyle from './style/global';

function App() {
  return (
    <>
      <GlobalStyle/>
    
        <div className="App">
          <div>Test !!</div>
        </div>
    </>
  );
};

리액트 중첩 라우팅

  • 기존 부모 라우터의 경로는 생략하고, 부모 페이지 내에서 이동할 자식 라우터의 경로만 작성해주면 된다.
//부모 컴포넌트 Service
const Service = () => {
    
  return (
    <>
      <Routes>
        <Route path="/" element={<Service1/>} />
        <Route path='/distribution' element={<Distribution />} />
        <Route path='/franchise' element={<Franchise />} />
        <Route path='/insurance' element={<Insurance />} />
      </Routes>
    </>
  );
};

export default Service;
  • 중첩 라우터를 사용하기 위해서는 부모 라우터에서 path에 *을 추가하여 뒤에 다른 요소가 붙어 라우터로 이동한 페이지 내부에서 다시 다른 컴포넌트를 렌더링 할 것임을 알려주어야 한다.
//최상위 컴포넌트 app.js
   <Route path="/service/*" element={<Service/>} />
profile
냠소현 개발일지

0개의 댓글