[TIL] 23Y03M29D

in TIL
[TIL] 23Y03M29D

오늘 한 일

  • Styled-component 분리
  • Styled-component global 지정하고 사용
  • React에서 SVG 사용
  • React Router 사용법

느낀 점

매번 Next를 사용하거나 최근에는 React-Native를 사용하다 보니까 React에 개념을 조금 잊어버렸었다. 그래서 다시 복귀할겸 프로젝트도하나 만들겸해서 React를 이용한 CRUD 프로젝트를 진행하게 되었다. 오랜만에 React로 하다 보니까 처음부터 조금 삐그덕삐그덕거렸던거 같다. 그래도 정보를 서칭하고 찾아서 계속해서 제작하고 있으며 되게 재미를 다시 한번 느끼고 있다. 얼른 프로젝트를 마무리하고 배포하고 싶다는 생각이 강하다.

배운 점

  • Styled-component 분리 하나의 파일안에 CSS를 사용했으나 CSS가 너무 길어질 수 있다는 단점 때문에 분리하려고 한다. 먼저 폴더 구조는 아래와 같이 만들었다.
    folder-structure
    그리고 코드 같은 경우 S라는 이름으로 가져와서 사용을 하였다.

    import * as S from './Header.styled';

const Header = () => {
  return (
    <S.HeaderLayout>
      Header
      <S.CategoryBox>
      Category
      </S.CategoryBox>
    </S.HeaderLayout>
  );
};

export default Header;

  • Styled-component global 지정하고 사용 나는 color를 전역적으로 사용할 생각이다. theme을 최상위에서 지정해서 아래 props로 내려주는 방식이다.

    // index.tsx
<ThemeProvider theme={theme}>
  <GlobalStyle />
  <React.StrictMode>
    <App />
  </React.StrictMode>
</ThemeProvider>

    styled-component에서 global로 사용하기 위해서는 theme이라는 이름으로 지정되어 있으니 theme을 불러와 사용하면 된다.

    export const HeaderLayout = styled.section<{ theme: string }>`
background-color: ${({ theme }) => theme.colors.white}; //theme으로 가져와 colors안에 있는 white를 사용
width: auto;
height: 5%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
`;

  • React에서 SVG 사용 Next에서는 svg파일을 그냥 import해서 가져와서 사용하면 되지만 React는 ReactComponent로 가져와서 별칭으로 사용하는 방법을 사용해야 했다.

    import * as S from './Header.styled';
import { ReactComponent as Logo } from '../../assets/owni.svg'; // Logo라는 이름으로 가져와서 svg 사용

const Header = () => {
  return (
    <S.HeaderLayout>
        <Logo />
    </S.HeaderLayout>
  );
};
export default Header;

  • React Router 사용법 npm install react-router-dom를 사용해서 react router를 설치하여 사용하며 router를 사용하려고 하는 곳에서 BrowerRouter이라는 컴포넌트로 감싸서 사용해야한다. Route컴포넌트는 path와 element옵션등을 가지는데 path에는 url의 경로를 작성해주면 되고 element는 보여주고싶은 컴포넌트를 넣어주면 된다.

    import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Header from './components/layout/Header';
import Login from './pages/Login';
import Main from './pages/Main';
import Post from './pages/Post';
import Register from './pages/Register';
import Writing from './pages/Writing';
import * as S from './App.styled';

const App = () => {
  return (
    <>
      <BrowserRouter>
        <Header />
        <S.Main>
          <Routes>
            <Route path='/' element={<Main />} />
            <Route path='/Post' element={<Post />} />
            <Route path='/Writing' element={<Writing />} />
            <Route path='/Login' element={<Login />} />
            <Route path='/Register' element={<Register />} />
          </Routes>
        </S.Main>
      </BrowserRouter>
    </>
  );
};

export default App;

    경로를 이동시키고 싶으면 Link태그를 이용하면 된다. 예를 들어 홈 url경로가 /이면 <Link to='/'>홈</Link>이라고 작성해주면 홈 클릭 시 홈컴포넌트로 이동한다.

Reference

© 2024. All right reserved Min