Done 😁
todo list frago88의 컴포넌트 중 일부를styled component로 바꿔주었다.- '상세페이지' 를 만들어
react-router-dom으로 Todolist 에 연결하였다.
Learned 👌
여러번 반복해서 봐도봐도 모자란 웹 브라우저의 동작 과정
-
사용자가 특정 페이지에 접속하여 HTML을 서버로부터 내려받으면,
브라우저의 렌더링 엔진에서는 이를 파싱한다. -
그래서 HTML 다음에 넘어오는 Link 태그에서 만난 StyleSheet를 내려받게 된다.
StyleSheet가 넘어오게 되면서 CSS 파싱을 통해 CSSOM 트리를 만들게 된다. -
일련된 과정을 통해 둘을 결합하여 렌더 트리를 만들고, 레이아웃 작업을 통해 사용자에게 그려줄 영역을 계산한 뒤, 화면에 뿌려주게된다.
-
위 과정을 진행하면서 자바스크립트를 만나면, 자바스크립트 런타임 환경에 컨트롤(권한)을 넘겨 결과 값을 받는다.
즉 자바스크립트로 문서를 동적으로 고칠 수가 있기 때문에 html로 초기 렌더링은 가능하지만 자바스크립트가 날라오게 되면서 문서나 StyleSheet에 변경이 생깁니다.
그려야하는 문서의 내용이 바뀌어 버리니까 이 과정 중, DOM파싱은 중단된다. -
생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향 받은 모든 노드의 수치를 재계산하여, 렌더 트리를 재생성하는 과정을 Reflow 과정이라고하며, 이 과정이 끝난 후 재생성된 렌더 트리를 다시 그리게 되는데 이 과정을 Repaint라고 합니다.
리덕스 (Redux)
- 리액트에서 리덕스를 사용하려면,
redux,react-redux가 필요하다. - 설정코드는 지금 당장 이해 할 필요가 없다.
- “중앙 State 관리소"를 Store (스토어)라고 부른다.
- 모듈이란, State들이 그룹이다.
SPA (Sigle page application)
🗣 회원가입 페이지가 있습니다.
유저가 열심히 회원ID, 비밀번호, 주소, 전화번호 등등의 인적사항을 입력하고 완료 버튼을 눌렀는데!
위에 실수로 필수로 입력해야하는 비밀번호 확인 란을 빼먹었네요!
그래서 입력을 다시해달라는 메세지가 뜨고 다시 HTML을 받아와 페이지가 재로딩됬습니다.
그랬더니 지금까지 기껏 입력해둔 정보들이 다 날아가 버렸습니다. 유저는 짜증이납니다.위와 같은 방식은 MPA(Multiple Page Application) 라고 합니다. 풀어말하면 여러 개(Multiple)의 Page로 구성된 Application 이라고 할수 있겠네요. MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드되고, 매번 전체 페이지가 다시 렌더링 됩니다.
그래서 위의 경우처럼 상태값 유지가 되지 않아 사용성에 불편함을 주는 경우가 생깁니다. 저렇게 요청에 실패하면 다시 회원가입 페이지로 보내버리게 되는 거죠. 아예 다시 받아온 HTML 이다 보니 당연히 아까 입력한 내용들은 하나도 남아있지 않습니다.
이럴때는 한 개(Single)의 Page로 구성된 Application 즉 SPA(Sigle page application) 를 사용합니다.
SPA(Sigle page application) 는 MPA 방식과 달리 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드한 후, 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달받아서 페이지를 갱신합니다. 그래서 SPA를 CSR(Client Side Rendering)방식으로 랜더링 한다고도 말합니다.
그럼 SPA가 짱인걸까요? 단점은 없을까요????
MPA 방식의 경우엔 유저가 그 페이지를 방문을 해야지만 그 페이지에 대한 데이터(html, css, js 등등)를 받습니다. 그런데 SPA에는 모든 정적 리소스가 통으로 다들어있게 됩니다. 그러다보니 유저가 이용하지 않을 정적 리소스까지도 다 불러오기 때문에 최초 방문시에 로딩이 느리다는 단점이 있습니다.
하지만 첫 로딩이 좀 느릴지라도 이후 페이지를 이동 할 때는 매우 빠르게 이동할 수 있습니다.
React 또한 SPA 방식입니다. HTML이 하나만 있습니다.
/aaa /bbb /ccc 어디로 페이지가 이동을 해도 HTML은 index.html 하나 뿐입니다.
리액트에서는 react-router-dom 패키지를 사용하여 각각의 페이지를 구현 할 수 있습니다.
다시 한번 정리해 봅시다.
SPA(Single Page Application) 는
- 한 개(Single)의 Page로 구성된 Application이다.
- SPA는 CSR(Client Side Rendering) 방식으로 렌더링한다. 단 한 번만 리소스(HTML, CSS, JavaScript)를 로딩한다. 그 후에는 데이터를 받아올 때만 서버와 통신한다.
- 즉, 첫 요청시 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지의 내부를 수정해서 보여주는 방식이다. 이를 클라이언트 관점에서 말하자면 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신하는 것이다.
- 필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있다.Angular, React, Vue 등 프론트엔드 기술들이 나오면서 크게 유행하고 있다.
