React Router를 활용한 SPA 구현 가이드

1. npm create reac
   • 리액트 라투어
     • SPA (Single Page Application) : 전통적인 멀티 페이지가 아니다!
     
     
     • 리액트는 rerendering이라는 방식을 쓰고 있다.
     • spa의 단점 :
       1. 앱의 규모가 커지면 js 파일도 너무 커져서 로딩이 지연됨(과하게 오래걸림) ← 멀티 페이지와 다름
       2. 브라우저에서 랜더링이 완료되기까지 빈 화면이 나오게 됨 ⇒ 때문에 progress 화면을 따로 띄우게 된다
          • 자스는 싱글스레드 작업이기 때문!
       3. 그래서 규모가 큰 어플리케이션은 ssr(server side rendering) 방식으로 처리하게 된다.
       4. 웹팩 설정(서버측 설정)
     • 장점 : 다양한 이벤트를 줄 수 있으며 한 페이지 내에서 다양한 걸 할 수 있다
   t-app router-toturial

• 웹에서 라우팅이란?
  • 브라우저의 주소 상태에 따라서 다양한 화면을 보여주도록 처리하는 것을 말함
  • 리액트 라우팅은 싱글 페이지는 맞지만 url 주소에 따라 실행시킬 컴포넌트들을 바꿔준다!
  • create react-app 로 프로젝트를 생성하게 되면 기본적으로 SPA에 CSR(클라이언트 랜더링)
  • 하나의 페이지만 사용하지만 리액트 라우터를 사용해서 여러 페이지가 존재하는 것처럼 사용이 가능하다.

 

• 라우터 설치 : npm install react-router-dom
• 라우터 적용하기
  1. 라우터 사용할 때는 index.js에서 App 컴포넌트를 <BrowserRouter>로 감싸준다.
  2. 페이지 컴포넌트 만들기
  3. App 컴포넌트에서 <Routes>를 사용해서 분기처리
  4. 주소 요청을 통해서 확인
• <a> 태그의 경우 컴포넌트에서 값을 넘기는건 넘어가지 않음! → 리 렌더링 되기 때문 ⇒ link라는 태그를 쓴다.
  • <li><Link to="/user">User</Link></li>

---

• URL 파라미터 or 쿼리 스트링
  • 같은 컴포넌트에 전달되는 데이터에 따라서 다른 내용을 보여줘야 할 경우가 존재
    • 이때에 URL주소의 매개변수를 전달할 수 잇고 컴포넌트는 그 값을 받아서 사용할 수 있다.
  • ex) 사용자 정보, 게시글의 상세 내용
  1. 쿼리 스트링
     • 쿼리 스트링은 주소의 ? 뒤에 키=값 형태로 넘기는 매개값이다
     • 별도의 라우터 설정은 하지 않아도 된다.
     • 컴포넌트에서는 useLocation(() 훅 또는 userSearchParam() 훅을 사용해서 쿼리 스트링을 받을 수 있음
  2. url 파라미터
     • url파라미터는 주소뒤에 /경로/값/값 의 형태로 넘어가는 매개값
     • 라우트에 추가적인 설정이 필요함.. ex) 주소/:키
     • 컴포넌트에서는 useParams()훅을 사용하여 url 파라미터를 받을 수 있다.

 

 

• 중첩라우트로 공통부분 처리하기
  • 글페이지가 있고, 글에 따른 상세 화면이 있다고 가정
  • 다음과 같이 라우터 설정하는 것을 볼 수 있음 <Route path='/board' element={<Board />} /> <Route path='/board/:num' element={<BoardContent />} />
  • 위의 설정으로 라우트가 달리 설정되기 때문에 각각 다른 화면이 보이게 된다
  • 만약에 Board 목록 페이지(Board.js)를 공통으로 사용하고, 상세페이지를 서브로 보여주고 싶은 경우 중첩라우트를 활용할 수 있음
  • 중첩라우트가 적용되면 부모 컴포넌트에서 <Outlet> 컴포넌트를 활용해서 하위 라우트를 보여줌
  • 중첩 설정

<Routes>
   <Route path='/board' element={<Board />} >
      <Route path=':num' element={<BoardContent />} />
   </Route>
</Routes>

 

• 라우터의 부가적인 기능
  1. NavLink 컴포넌트
     • 링크에서 사용하는 경로가 라우터의 경로와 일치하면 특정 스타일을 적용(활성화 기능)
  2. useNavigate() 과 Navigate 컴포넌트
     • useNavigate() 훅
       • JS의 history 객체를 대신합니다.
     • Navigate 컴포넌트
       • 리다이렉트 기능
       • 렌더링 시에 사용

• NavLink 컴포넌트
  • NavLink는 링크의 경로가 라우터의 경로와 일치하면 특정 스타일을 적용해 준다.
  • NavLink는 style 속성을 제공하고 있다.
  • style 속성에는 실행시킬 함수를 작성한다.
  • 이 함수의 매개변수로 {isAcitive: boolean}객체를 넣어주는데, 활성화 여부를 표시할 수 있다.
  • 사용은 반드시 {isActive} 변수로 구조분해 할당한다.
• useNavigate() 훅 (history객체를 대신해서 사용)
  • useNavigate 훅은 특정 이벤트 발생 시 url을 조작할 수 있는 함수를 제공한다.
  • react v6에서 useHistory가 변화한 것이다.
  • ex) let navigator = useNavigate();
• Navigate 컴포넌트
  • <Navigate > 컴포넌트는 랜더링 될 때 현재 위치를 변경합니다.
  • useNavigate() 훅과 비슷해 보이지만 useNavigate()훅은 렌더링 과정에 사용할 수 없다.

 

 

React-Router를 이용한 페이지 만들기

  메인 홈 : Home.js
  Header : Navigateor 역
  MyPage : MyPage.js
      -> 로그인 한 사용자 정보를 출력
  게시판 : Board.js 
      BoardContent.js를 통해서 게시글을 클릭하면 내용이 출력
  계정 정보를 위한 객체 생성
    계정 정보에는 계정명, name, age, description 및 추가 내용 포함
   (필요하다면,)

 

https://github.com/CheHyeonYeong/JavascriptStudy/tree/main/homework0620