React SPA
SPA는 Single-Page Application을 의미
서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아
그 정보를 기준으로 현재의 페이를 업데이트하는 것.
SNS에 좋아요를 누르고 댓글을 다는 경우 화면 전체가 렌더링하게 되면 서버가 과부화가 올수도 있고 사용자또한 불편할 수 있음. 그래서 업데이트가 필요한 부분만 업데이트를 하게되면 사용자도 좋고 서버도 좋음.
단점
- SPA의 경우 JavaScript의 파일이 크다.
HTML파일은 거의 비어있고 대부분의 코드는 JS안에 있다보니 JS가 무거워지고 웹페이지 실행시 JS파일을 읽는데 시간이 걸리게 되면 첫 화면의 로딩 시간이 길어짐. - 검색엔진 최적화(Search engine optimization)이 좋지 앟음.
구글이나 네이버 같은 검색엔진은 HTML파일에 있는 자료를 분석하는 방식으로 검색기능을 구동하는데
SPA같은경우는 JS에 코드가 많이 몰려있기 때문.
Wireframe
웹페이지의 레이아웃과 UI요소 등에 대한 뼈대
디자인에 들어가기 전 단계로 선(wire)를 이용해 윤곽선(frame)을 잡는 것을 이야기함.
Mockup
데모, 시연, 평가를 위한 최소한의 기능만 담은 모형
데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인 한것.
React Router
SPA를 만들경우 메인 페이지나, 알림페이지, 마이페이지등의 화면이 필요한 경우가 생김
이 경우 화면에 따라 웹 페이지의 "주소" 또한 달라짐
다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다"라는 의미로 라우팅(Routing)이라고 함
React자체에는 Router기능이 내장되어져 있지 않아 React SPA의 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용.
npx create-react-app 파일명
해당 파일 이동
npm install react-router-dom
강의 내용
react import에서 {}를 쓰고 안쓰고의 차이
객체 구조 분해 할당
const {BrowserRouter , Link , Route, Switch} = React RouterDom;
SPA -> HTML파일이 하나가 있고 JS파일이 막 이것저것 바꾸는것이다.
React Router ==> 하나의 프로그램으로 만든 프로그램 하나의 extention이라고 보면됨.
route(영어 단어 해석해보면 "길)
router ==> 길잡이 길 안내자
웹에서의 길잡이 == URL
Reac Router 주요 컴퍼넌트
BrowserRouter --> 가장 상위 컴퍼넌트 (최상위 컴퍼넌트) ,
모든 길을 관장하고 있어야함.
Switch --> 어떤 Route로 갈지 정해주는 친구
Route --> 길잡이 / 이길로 가면 뭐가 나온다 라는 것을 알려줌 / 길준비하기
Link --> 어떤 경로를 선택할 것인가 -(nav와 연관있음) / a태그 같은것이라 브라우저의 주소는 변경이 됨.
..
Switch의 경우 route를 감싸게끔 만들면 된다.
역할을 이해하는것이 중요하다!
