20210923-TIL

노강표 Noh Gang Pyo ·2021년 9월 23일

라우팅

SPA( single Page Application)

  • 서버에서 주는 html이 1개뿐인 어플리케이션
  • 리액트는 SPA 어플리케이션이다.
    - spa장점 : 페이지를 이동할떄마다 서버에 html을 요청하게되면 페이지 이동간 바뀌지 않은 부분까지 불러오게되는 낭비를 줄 일수 있다.
    - spa단점 : 처음에 모든컴포넌트를 받아온다(사용자가 굳이 안들어가는 페이지까지 모두 가져온다)

라우팅 정의

  • spa임에도 불구하고 브라우저의 주소에따라 다른 페이지를 보여주게해주는 것
  • 라우팅 라이브러리를 리액트에 가져옴으로써 사용할수있다.
yarn add react-router-dom 명령어로 가져올 수있음.

리덕스

-> 리덕스를통한 리액트 상태관리.

  • 여러 컴포넌트가 동일한 데이터를 공유해야할떄유용.
  • 데이터를 관리하는 로직을 따로 뺴서 관리함으로써 컴포넌트는 뷰만 담당할수있게되어 유지보수에 수월하다.
  • Store,Action,Reducer,Component
  1. Store을 component에 연결시킨다.
  2. Component에서 상태를 변화시킬떄 Action을 호출.
  3. Reducer를통해 새로운 상태값을 만들고 그 값을 Store에 저장한다.
  4. Component는 새로운 상태값을 받아온다.( 상태값 변경으로 리렌더링발생)
  • 리덕스 패키지 설치
yarn add redux react-redux

회고

  • 3주차부터 새로운 개념들이 갑자기 몰려들어온다. 오늘하루종일해서 3주차 숙제를 겨우 끝냈다. 일단 내용은 어느정도 이해가가는데 아직 능숙하게 사용하려면 반복만이 답인것같다. 3주차 마지막 숙제내용이 거의 3주차 내용을 모두 다룰 수있는 부분인거같기도하고 이부분을 이용해서 이후 개별 과제를 작성할것같아 대충보고 못넘어갈것같다는 생각이든다.. 약간 리덕스가나오는부분에서 1주차떄의 디비에서 데이터를 조작하면서 데이터를 꺼내고 넣고 하는부분이 좀 비슷한거같긴하다.
profile
FE developer 🙂

0개의 댓글