9/17 학습

SPA(Single Page Application)

• 서버로부터 전체 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아서 업데이트하는 웹 애플리케이션
• 장점
  • 필요한 부분만 받아와서 사용자와 상호작용이 빠르다
  • 서버 과부하가 줄어든다
• 단점
  • JS의 파일 크기가 크기 때문에 첫 로딩 시간이 길다
  • HTML에는 많은 자료가 담겨있지 않기 때문에 검색엔진 최적화가 좋지 않다.

import {BrowserRouter, Link, Switch, Route} from "react-router-dom"

function App() {
 
  return (
    <BrowserRouter>
      <div className="App">
        <Link to="/"><div>첫 번째 컴포넌트</div></Link>
        <Link to="/second" ><div>두 번째 컴포넌트</div></Link>
        <div>경로가 일치하는 라우트만 표시</div>
        <Switch>
          <Route exact path="/" component={FirstComponent}></Route>
          <Route exact path="/second">{SecondComponent}</Route>
        </Switch>
      </div>
    </BrowserRouter>
    
  );
}


const FirstComponent = (props) => {
  //goBack()메소드를 이용한 뒤로가기 버튼
  return <button onClick={() => props.history.goBack()}>first component 뒤로가기</button>;
}

const SecondComponent = (props) => {
  //goBack()메소드를 이용한 뒤로가기 버튼
  return <button onClick={() => props.history.goBack()}>second component 뒤로가기</button>;;
}

export default App;

• BrowserRouter, Switch, Route 컴포넌트로 경로가 일치하는 단 하나의 라우터만 렌더링 시킬 수 있다.
• Route 컴포넌트의 props는 'history', 'location'같은 객체들을 갖는다.
• Route 컴포넌트가 아닌 곳에서 'history', 'location' 객체를 이용하기 위해서는 withRouter() 고차 컴포넌트를 이용하면 된다.
• HTML과 달리 onClick, onChange 어트리뷰트를 이용할 때 함수의 실행 값이 아닌 함수 자체를 할당해 줘야 한다. 그렇지 않으면 렌더링과 동시에 실행돼 버린다.