오늘은 리액트 SPA에 대해 배웠다
SPA란 ?
Single Page Application의 약자이다
SPA는 화면의 header나 footer, sidebar 등 다시 로드해도 변함이 없는 부분들은 그대로 유지한 채 변경되는 부분의 데이터만 가져와서 수정하는 웹사이트를 말하는데요,
리액트로 SPA를 구현한다는 것은 곧 해당 요청에 맞는 컴포넌트만 라우팅하여 부분적으로 렌더링한다는 것을 의미합니다.
이 때 요청에 맞는 컴포넌트를 매칭시키기 위해 react-router-dom을 사용합니다.
※참고
react-router와 react-router-dom, react-router-native의 차이
react-router-dom은 웹에서 쓰이는 컴포넌트를, react-router-native는 react-native를 활용한 앱개발에 쓰이는 컴포넌트를 포함하고 있으며
react-router는 이 둘을 합친 패키지입니다.
웹개발을 위해서는 react-router-dom만 설치하면 됩니다.
Browser router
Browser router 는 HTML5의 history API를 활용하여 UI를 업데이트합니다.
Route
요청받은 pathname에 해당하는 컴포넌트를 렌더링합니다.
Switch
path의 충돌이 일어나지 않게 Route들을 관리합니다.
Swtich 내부에 Route들을 넣으면
요청에 의해 매칭되는 Route들이 다수 있을 때에 제일 처음 매칭되는 Route만 선별하여 실행하기 때문에 충돌 오류를 방지해주며, Router간에 이동 시 발생할 수 있는 충돌도 막아줍니다.
path와 매칭되는 Route가 없을 때에 맨 밑에 default Route의 실행이 보장됩니다.(path 속성을 명시하지 않은Route
Link
링크를 생성합니다.
Browser Router는 항상 이들중 최상단에 위치합니다.
블로그 작성에 도움이 된 글
출처https://codingbroker.tistory.com/72
잘한점.
1.리액트에서 Browser Router의 개념을 잘 숙지했다
2. Switch와 Router가 어떤 역활을 하는지 숙지 했다
3.Link컴포넌트를 만드는 방법을 잘 몰랐는데 방법을 익혔다
아쉬운점.
1.조금만 더 자세히 공부 했더라면 더 빠르게 개념을 이해 할 수 있었는데 아쉽다
2.SPA를 좀 더 고차원적으로 만들 수 있어야 할 것 같다
3.컴포넌트에 대한 이해를 더 해야겠다
