오늘은 SPA 웹페이지의 핵심, 라우팅 기술에 대해 직접 사용해보고 느낀 점을 적는 간단한 감상평입니다.
강력한 기능에 비해 사용하기 굉장히 쉽습니다.
그렇다면 바로 사용하는 방법에 대해 알아보겠습니다.
react-router-dom
우선 패키지 설치가 요구되는 기능이기에 npm을 사용해 설치하겠습니다.
npm install react-router-dom
명령어를 통해 패키지가 프로젝트에 성공적으로 설치 되었으면 jsx 파일 안에서 라우팅 설정을 합니다.
<BrowserRouter> - 이 태그를 통하여 사용 할 컴포넌트들을 감싸줍니다.
<Routes> - Route 태그를 그룹화해주는 태그입니다. 현재 URL에 맞는 컴포넌트를 렌더링해줍니다.
<Route> - path와 element를 받아 렌더링 할 컴포넌트를 정의합니다. path는 URL에 추가 될 경로, element는 해당 경로에 할당할 컴포넌트입니다.
<Link> - 클라이언트 사이드 라우팅 태그입니다. 페이지를 새로 고치지 않고 다른 경로로 이동할 수 있습니다.
이것만 하면 너무 짧으니 또 적극 사용한 styled-components도 정리해 보겠습니다.
styled-components
styled-components도 패키지 설치가 요구되는 기능입니다.
npm install styled-components
명령어를 통해 패키지를 프로젝트에 설치 해줍니다.
해당 패키지는 CSS in JS를 지향하는 패키지로 자바스크립트 안에 CSS를 할당하여 스타일된 태그를 컴포넌트의 형태로 JS로 반환이 가능하게 해주는 패키지입니다.
const StyledDiv = styled.div`
width: 150px;
height: 150px;
background-color: white;
` 위의 명령어와 같이 컴포넌트 태그 이름으로 사용될 변수명을 지정해주고 변수 안에 styled.tagName을 사용해 줍니다. 그런 후 뒤에 ``으로 css 스타일을 적용시켜주면 완성입니다.
위의 tagName에는 HTML에서 사용하는 태그를 추가해주면 됩니다. ex) div, button, input등...
마무리
오늘은 포켓몬 도감 프로젝트를 진행하며 사용했던 react-router-dom 패키지와 styled-components 패키지를 정리하는 시간을 가졌습니다. 그저 패키지를 사용하는 것 뿐이라 어려운 점은 없었습니다. 내일부터는 프로젝트를 진행하다 추후 생기는 트러블슈팅을 가져올까 합니다.
