[수업 목표]
- React-router로 주소에 따라 다른 페이지를 보여줄 수 있다.
- 미리 정해놓은 주소가 아닐 때, '앗! 잘못 찾아오셨어요!' 페이지를 보여줄 수 있다.
- Redux로 상태관리를 해보고 아래의 상태관리 흐름을 이해한다.
(기본 값이 있고 → 어떤 동작을 하면("어떤 동작을 하는 지 정하자! → 하면 뭐가 바뀌는 지 정하자!" 과정이 사전에 필요하다!) → 값이 변했잖아? → 컴포넌트한테 알려주자!) - Redux hook을 사용해본다.
1. 라우팅이란
▶SPA = Single Page Application!
서버에서 주는 html이 1개 뿐인 어플리케이션.
SPA는 딱 한 번만 정적자원을 받아옵니다.
👉사용성 때문에 사용한다!
페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고,
바뀌지 않은 부분까지 새로 불러오니까 비효율적이기 때문
👉 단점 : 첫 로딩 속도가 느려진다. ▶라우팅이란?
카페 페이지에서 블로그 페이지로 넘어가는 것을 라우팅.
쉽게 말해 페이지를 돌아다니는 것. =페이지 구분
이미 만들어진 라우팅 라이브러리를 가져와서 사용할 것임.
2. 리액트에서 라우팅 처리하기
▶yarn add react-router-dom 패키지 설치
▶REACT-route-dom 공식문서
▶페이지 전환 순서
1. index.js에 BrowserRouter 적용하기
2. 세부 화면 만들기
3. App.js에서 Route 적용하기
4. exact 적용하기_중복주소 처리하는 방법‼
5. URL 파라미터사용하기
6. 링크 이동 시키기3. 라우팅, 꼼꼼히 쓰기
▶잘못된 주소 처리하기
이번엔 우리가 미리 정하지 않은 주소로 들어온 경우를 다뤄본다.
1.NotFound.js 파일 만들기
-빈 페이지를 하나 만들어야함
2.App.js에서 불러옴
3.Switch 추가
-리액트 라우터 돔에서 제공해줌
4.NotFound 컴포넌트를 Route에 주소 없이 연결하면 끝
▶웹 페이지에서 중요한 것은 "사용성!"
잘못된 페이지 접근일때 뒤로가기 넣어주기
4. 리덕스란?
리덕스는 아주 흔히 사용하는 상태관리 라이브러리임.
전역 상태관리를 편히 할 수 있게 해주는 고마운 친구!
데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 해주는 친구임. 아무데서나 참조하겠다!
▶yarn add redux react-redux 리덕스패키지 설치
▶REACT-redux 공식문서
💘리덕스에 대한 개념 키워드는 학습 이후에 다시 찾아보기!
▶리덕스 기본 용어
1.State_리덕스에서 저장하고 있는 값=데이터
2.Action_상태를 변화시킬 때 발생하는 것
3.ActionCreator_액션을 만들어주는 함수
4.Reducer_리덕스에 저장된 상태(=데이터)를 변경하는 함수
5.Store_우리가 데이터를 볼 수 있게 해주는 친구
6.dispatch_우리가 많이 쓰게 될 스토어의 내장 함수
,액션을 발생시키는 역할을 함▶리덕스의 3가지 특징
1.store는 1개만 쓴다!
2.store의 state는 오직 action으로만 변경할 수 있다!
3.어떤 요청이 와도 리듀서는 같은 동작을 해야한다!5. 리덕스를 통한 리액트 상태관리
리덕스는 여러 컴포넌트가 동일한 상태를 보고 있을 때 굉장히 유용하다.
또, 데이터를 관리하는 로직을 컴포넌트에서 빼면, 컴포넌트는 정말 뷰만 관리할 수 있음. 코드가 깔끔해질테니, 유지보수에도 아주 좋다 굳뜨 👍
▶상태관리 흐름
Store, Action, Reducer, 그리고 Component!
1. 리덕스 Store를 Component에 연결한다.
2. Component에서 상태 변화가 필요할 때 Action을 부른다.
3. Reducer를 통해서 새로운 상태 값을 만들고,
4. 새 상태값을 Store에 저장한다.
5. Component는 새로운 상태값을 받아온다.
(props를 통해 받아오니까, 다시 랜더링 된다)6. 덕스(ducks) 구조
보통 리덕스를 사용할 때는, 모양새대로 action, actionCreator, reducer를 분리해서 작성한다. 덕스 구조는 모양새로 묶는 대신 기능으로 묶어 작성함.
▶덕스 구조 문서
7. 컴포넌트에서 리덕스 데이터 사용
항상 중요하게 생각할 것은 순서다!
▶ 클래스형 컴포넌트에서 리덕스 데이터 사용하기
- 1) 리덕스 모듈과 connect 함수를 불러옵니다.
- 2) 상태값을 가져오는 함수와 액션 생성 함수를 부르는 함수를 만들어줍니다.
- 3) connect로 컴포넌트와 스토어를 엮어줍니다.
- 4) 콘솔에 this.props를 찍어봅니다. (스토어에 있는 값이 잘 나왔는지 볼까요!)
- 5) this.state에 있는 list를 지우고 스토어에 있는 값으로 바꿔봅시다!
- 6) setState를 this.props.create로 바꿔봅시다!
▶함수형 컴포넌트에서 리덕스 데이터 사용하기
- 1) BucketList.js에 useSelector() 적용하기
- 2) 몇 번째 상세에 와있는 지 알기 위해, URL 파라미터를 적용하자
- 3) 상세페이지에서 버킷리스트 내용을 띄워보자
알아둘것 ✨
- 액션명은 모두 대문자