React Router,Sass

routing이란?

• 다른경로(url주소)에 따라 다른 view를 보여주눈 것
• React-router는 리액트 라우팅 기능을 위해 가장 많이 사용되는 라이브러리
• React는 따로 가지고 있지 않다(그래서 라이브러리로 구분된다)

1. SPA가 무엇인지 설명할 수 있다.

   • 페이지가 한개인 애플리케이션

2. react-router-dom를 이용해 Routes Component를 구현할 수 있다.
   a. react-router 설치

   npm install react-router-dom (터미널에 작성)

   b. src 폴더에 Router.js파일을 만들어서 아래의 내용을 작성 해 준다

   
   c. index.js에서 Router파일을 import 해주고 라우팅 적용을 해 준다.
   

3. react-router-dom에서 Routing을 하는 방법 2가지와 차이점에 대해 설명할 수 있다.

   • 방법에는 <Link>를 이용하는 방법과 useNavigate로 구현하는 방법 두가지가 있다.

4. <Link> Component 와 <a> tag 의 차이점에 대해 설명할 수 있다.

   • <a> 서버에 요청하여 페이지를 새로고침 함 (외부사이트로 이동) 서버에 요청하지 않음(프로젝트 페이지 내에서 페이지 전환)
     a. ```Link to="/sign" ``` 를 이용 하여서 이동할 위치를 적어준다
     →클릭시 바로 이동하는 로직 구현 시에 사용

b. useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다.
→페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 useNavigate 훅을 활용

5. css 전처리기의 역할에 대해 설명할 수 있다.
   • css가 가질 수 있는 불리한 점을 해결하기 위해서 만들어짐.
     ->반복적으로 사용되는 부분을 변수로 처리하여 재활용성을 높여준다.
6. sass에서 제공하는 문법을 이용하여 css파일을 scss파일로 변환할 수 있다.
   1. npm install sass (터미널에 작성)
      →node-modules 폴더에 sass폴더가 생성된다
   2. .css파일 확장자를 .scss로 바꾼다
      →import 구문도 모두 수정한다.
   3. Nesting 기능을 적용한다