9/30 TIL

정민세·2022년 9월 30일
0

React

React SPA(Single Pages Application)

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

SPA의 장점

  • 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하면 되기 때문에 사용자와의 interaction에 빠르게 반응 할 수 있다.
  • 서버에서의 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저히 줄어든다.
  • 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공한다.

SPA의 단점

  • SPA 경우 javascript파일의 크기가 크다.
  • javascript 파일을 기다리는 시간으로 인하여 첫 화면 로딩 시간이 길어진다.
  • 검색 엔진 최적화가 좋지 않다. 구글이나 네이버 같은 검색 엔진은 HTML파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동한다. But SPA의 경우 HTML파일은 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 않는다.

React Route

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것
사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다.

1. npm install react-router-dom //라우터 라이브러리를 쓰기 위해서 install 해줌
2. import { Browser, Routes, Route, Link } from 'react-router-dom' // 라이브러리를 import 함으로써 적용 가능
3. Browser = HTML5를 지원하는 브라우저의 주소를 감지
			 최상위 부모요소로서, Route를 사용가능한 환경을 만들어줌
4. Routes = 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 함
5. Route = path에 경로를, element엔 componunt를 넣어 줌
		   여러개를 연결해주고 싶을 땐 URL 뒤에 *를 붙여 사용한다.
6. Link = to에 경로를 연결해주면 해당 componunt로 이동이 됨
		  <a> 태그와는 달리 새 창으로 이동이 안되고 그 페이지에서 render를 해준다.
function App() {
  return (
    <BrowserRouter>
      <div>
            <li>
              <Link to="/">Home</Link> //Link 컴포넌트를 이용하여 경로를 연결
            </li>

         <Routes>
          <Route path="/" element={<Home />} /> //경로는 path로 컴포넌트는 element로 연결
					
        </Routes>
      </div>
    </BrowserRouter>
  );
}

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

export default App;
profile
하잇

0개의 댓글