프론트엔드의 꽃, 리액트 3주차

안성후·2021년 7월 10일
0

01. 라우팅?

01) SPA(Single page Application)

서버에서 주는 HTML이 1개 뿐인 어플리케이션, 전통적인 웹사이트는 페이지를 이동할때마다 서버에서 HTML, CSS, JS(정적자원)을 내려준다면 SPA는 딱 한번만 정적자원을 받아 온다.

  • 왜 굳이 HTML을 하나만 주는것인가?
    -> 많은 이유가 있지만 제일 중요한것은 사용성 때문이다.
    페이지를 이동할때마다 서버에서 주는 HTML로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오다보니 비효율적이다.

    단점: 딱 한번 정적을 내려받다보니 처음에 모든 컴포넌트를 받아온다.
    사용자가 안들어가 볼 페이지까지 전부를 가져오기때문에 첫 로딩 속도가 느리다.

02) 라우팅

SPA는 딱 하나의HTML 가지고 있지만, 브라우저 주소창대로 다른페이지를 보여줄 수 있다. 이렇게 브라우저 주소에 따라 다른 페이지를 보여주는 것을 라우팅 이라고 한다.

라우팅을 직접 구현하지 않고 이미 만들어진 사용자들이 많이 사용하는 라우팅 라이브러리를 가져와서 사용해보자.
[라우팅 패키지(yarn add react-router-dom)]

02.리덕스?

[리덕스 패키지(yarn add redux react-redux)]
-> 리덕스는 데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼수 있게 해주는 친구 이다.
(01) store는 1개만 사용
(02) store의 state(데이터)는 오직 action으로만 변경가능
(03) 어떤 요청이 와도 리듀서는 같은 동작을 해야한다.

profile
기초 부터 차근차근

0개의 댓글