19일차

2021. 08. 12 목요일

1. Today's Key points!

• SPA
• RouteBrowser,  Switch, Route, Link
• React Twittler SPA Sprint

2. 정리해보자!

• SPA란? Single Page Application의 약자로 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말합니다.
  SPA 장점 : SNS를 예로 들면, 올라오는 사진에 '좋아요'를 누르고, 댓글을 달고, 궁금할 땐 검색을 하기도 한다. 이렇게 애플리케이션과 사용자 사이에 수시로 상호작용이 발생하는데, 이때 페이지 전체를 렌더링 하는 것이 아니라 필요한 부분만 업데이트하기 때문에 SSPA는 사용자의 행동에 빠르게 반응한다. 이런 방식으로 만들어진 대표적인 서비스로 Youtube가 있다. 이 밖에도 facebook, Gmail, airbnb, Netflix 등 우리가 일상적으로 사용하는 다양한 서비스들이 SPA 방식으로 제작되어 있다.
• SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하는 것이 아니다. 예를 들어 Twittler와 같은 SPA를 만들 때, 메인 트윗 모음 페이지, 알림 페이지, 마이 페이지 등의 화면이 필요하다. 또한 이 화면에 따라 '주소'도 달라질 것이다. 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 '경로에 따라 변경한다.'라는 의미로 라우팅(Routing)이라고 한다. 이러한 기능이 React 자체에는 내장되어 있지 않다. React SPA에서는 라우팅을 위해 React Router 라는 라이브러리를 가장 많이 사용한다.
• React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있다.
  • 라우터 역할, 웹 애플리케이션에서 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할을 하는 BrowserRouter.
    
  • 경로를 매칭해주는 Switch와 Route. Switch 컴포넌트는 여러 Route를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링 시켜주는 역할을 한다. Switch를 사용하지 않으면 매칭되는 모든 요소를 렌더링 한다. Route컴포넌트는 path 속성을 지정해서 해당 path에 어떤 컴포넌트를 보여줄지 정한다. Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동한다.
    
  • 그리고 경로를 변경하는 역할을 하는 Link 가 있다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지해서 페이지의 주소만 변경해 준다.
• 이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 따로 불러와야 한다. import 명령어를 통해 필요한 모듈을 불러오는 역할로 비구조화 할당과 비슷하게 이용할 수 있다.
  
• React Router를 사용하는 과정을 Sprint 복기를 통해 보여주고자 한다.

3. 복기!

• React Twittler SPA Sprint

우선 React Router를 사용하기 위해서는 npx create-react-app으로 React 프로젝트 환경을 만들고, npm install react-router-dom으로 React Router 라이브러리를 설치한다.

이제 App.js 파일로 가서 최상단에 react-router 라이브러리가 제공하는 컴포넌트들을 사용하기 위한 세팅을 한다.

세팅을 해놓고, Sidebar 메뉴 컴포넌트에 About 아이콘 <i className="far fa-question-circle"></i>, MyPage 아이콘 <i className="far fa-user"></i>  을 넣는다. 그리고 각 아이콘을 눌렀을 때, 주소에 맞게 페이지 뷰가 구현될 수 있도록 주소를 링크한다.

Tweet.js에서 import를 이용해서 Footer컴포넌트를 연결한다.

MyPage.js에도 Footer 컴포넌트를 연결한다. 그리고 MyPage에서는 kimcoding이 작성한 트윗만 보여야 한다. username이 kimcoding인 자료만 불러내야하기 때문에 filter메소드를 이용해서 자료를 필터링한 변수를 하나 만들어준다. 그리고 만들어준 변수와 map메소드를 활용해서 화면에 자료를 보여주는 구성을 만들어준다.

App.js에서 우선 컴포넌트들을 import 해준다. 그 다음 사이드바의 아이콘을 누르면 해당 페이지 뷰가 구현되도록 주소를 설정해준다.

여기서 BrowserRouter컴포넌트가 App컴포넌트가 리턴하는 것을 감싸게 해주고, Switch컴포넌트 안에서 Route컴포넌트를 사용해 주소를 설정해준다. 근데 Tweets 컴포넌트 Route에만 exact라는 것을 볼 수 있다. React router의 특성상 exact 속성이 없으면 해당 경로("/")로 시작하는 중복된 <Route>컴포넌트를 모두 보여준다. 따라서 exact는 주어진 경로와 정확히 일치해야만 설정한 <Route>컴포넌트를 보여주는 역할을 한다. 아래는 이 모든 결과 이다.