React-2

01.SPA

SPA(Single Page Application)는 페이지가 한 개인 애플리케이션

한개의 웹페이지(html) 안에서 여러개의 페이지를 보여주는 방법은 Routing 을 이용해서 작업해주면 된다.

라우팅(Routing) 이란 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것 입니다.

---

02. Routing

Create React App(CRA)에 특별히 routing을 위한 로직이 들어있지 않기 때문에, 가장 인기 있는 routing solution인 react-router 를 추가해서 routing을 구현해야한다.

src폴더에 경로 모음집들의 파일을 만들어 주어 해당 폴더에
꼭 BrowerRouter Router 태그 안에 불러오고 싶은 페이지의 경로를 element로 불러준다.

상단의 import의 react-router-dom 부분을 넣어줘야지 실행이 가능하다.

---

03. Link to 컴포넌트 & useNavigate 으로 구현하는 방법

Link /

• 프로젝트 내에서 페이지 전환하는 경우

• 클릭 시 바로 이동하는 로직 구현 시에 사용

  ex. Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 상세 페이지로 이동

useNavigate

• 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 useNavigate 훅을 활용하여 구현

  ex. 로그인 버튼 클릭 시
  Backend API로 데이터(User Info) 전송
  User Data 인증 / 인가
  response message
  Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
  Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동

---

04. SCSS

사용이유

• CSS는 프로젝트의 규모가 커질수록 코드의 가독성이 떨어지며 유지보수에 어려움이 있을 수 있다.

• SCSS를 사용하면 코드의 재활용성과 가독성이 높아진다.
  따라서 SCSS는 기존 CSS의 단점을 보완하고 작업의 효율 향상에 도움이 된다.

SCSS 설치하기

1. 리액트 작업 폴더 경로에 npm을 이용해 아래와 같이 입력하여 설치한다.

   npm install node-sass --save

2. .css로 된 파일명을 .scss로 바꿔서 사용하면 된다.

---