TIL 5주차 1,2일 - React SPA.Router

학습 내용

1.SPA

1.1 등장배경 및 정의

• Single Page Application

• 전통적인 웹사이트 : 웹페이지에서 다른 페이지로 이동하면 HTML 파일로 된 "페이지 전체"를 불러와야만 함.

• SPA 에서는 변경된 부분만 다시 불러와 효율적

• 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 싱글 웹 어플리케이션

1.2 장점

• 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하면 되기 때문에 사용자와의 Interaction 에 빠르게 반응

• 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 감소

• 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공

1.3 단점

• Javascript 파일의 크기가 크기 때문에 첫 화면 로딩 시간이 다소 김.

• 보통의 검색 엔진은 HTML파일을 기준으로 자료를 분석하는데 SPA의 경우 HTML 파일은 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못함.

2.React Router

2.1 개념

• 하나의 SPA 에서 다른 주소에 따라 다른 뷰를 보여주는 과정을 '경로에 따라 변경한다.' 라는 의미로 라우팅(Routing)이라고 합니다.

2.2 React Router 라이브러리

• React SPA 에서 Router를 사용하기 위해서는 라이브러리를 설치해야 한다.
  npm install react-router-dom

2.3 주요 컴포넌트

• router : <BrowerRouter>, 라우터 역할

• route matchers : <Switch> <Route>, 경로를 매칭해준다.

• route changers : <Link> , 경로를 변경해준다.

• 주요 컴포넌트를 비구조화 할당(destructuring)을 이용하여 불러와서 사용한다.
  import {BrowerRouter,Switch,Route,Link} from "react-router-dom"

2.4 활용 예시

function App() {
  return (
    <BrowserRouter>     // 전체 라우터로 감싸준다.
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>    {/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/about">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <Switch>                // 경로를 만들어준다.
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <MyPage />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

function Home() {        // 경로 도착지인 컴포넌트 생성
  return <h1>Home</h1>;
}

function MyPage() {
  return <h1>MyPage</h1>;
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;

느낀점 && 미비한 점

React 라는 것이 너무 어렵다.
단순 조건문,함수,배열 처럼 알고리즘 문제가 있는 것도 아니다 보니 반복 경험을 통해 익숙해지기도 힘들고 그러다 보니 이해는 안가고 생각만 복잡해지는 느낌이다. 지금 당장 답은 꾸준히 보는 수밖에 없을 거 같다.