리액트 TIL

리액트 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/>} />