Router : 슬래시 /.
SPA여서 실제로 다른 페이지로 가는 것은 아니고 그렇게 보이게 하는 것이다.
✍️ 기억해야할 삼총사
BrowserRouter : 이 브라우저에서 라우터를 사용하겠다
Routes : 이 페이지에 들어가는 경로들을 하나로 묶어주는 것
Route : Routes 안에 들어가는 라우트들
만들기 전 늘 주의해야 할 것은 yarn add redux react-router-dom이 되었는지 확인할 것 .
Router.js에 BrouwserRouter, Routes, Route가 import 되어 있는지 확인할 것
⭐️ Router 구조
// Router.js
const Router = () => {
return (
<browserRauter>
<Routes>
<Router path = "/123" elements = {<todo/>}>
<Router>
<Router>
</Routes>
</browserRauter>
)
}Route 태그 안에 path = “ “ 와 elements ={ <불러올 라우터명/> }
라우터 주의할 점 => 페이지 이동할 때 프롭스로 값을 보내줄 때 어떻게 받아줄지
EX) 투두리스트에서 편집할 때 상세페이지 들어가야함 : 라우터 써야되겠지 ?
라우트 path안에 어떤 값이 오더라도 페이지를 가지고 있을 수 있게 변수로 넣어주자
reducer 종요 흐름
Modules 안에는 리듀서를 리턴하는 많은 모듈들이 들어간다.
모듈들이 합해져서 store를 이룬다 ~
Store 안에는 여러가지 state를 관리할 수 있는 설정들이 들어가있음 !
리듀서들을 호출해서 state 값을 부르게 되는데 , 부를 때는 dispatch 훅을 사용
- configStore.js 만들 때
store를 만들기 위해서 rootReducer를 만드는 것 ( rootReducer가 없어도 되지만, 없으면 너무 복잡해짐)
⭐️ store를 만드는게 configstore.js 의 궁극적인 역할 ⭐️
rootReducer를 통해서 reducer들을 합칠 것임.
근데 reducer들은 뭐다? Modules 폴더 밑에 있는 여러 파일들이 반환하는 값이다~.
Ex) todos, counter , users 이러한 리듀서들을 합쳐서 하나의 중요한 뿌리가는 리듀서로 만든다.
Reducer 파일 작업 순서
작업하기 전에 리듀서 목록을 리스트업 하고 시작해야될 것 같다 ~
- Action items
- Action creators
- Initial state => reducer를 만들 떄 쓴다.
- InitialState는 배열인데 객체형태의 배열이다.
- reducer를 만들 것
- reducer를 export ! ! !
이 파일의 목표는 reducer를 export하는 것 !
📖 혼란을 틈타 용어정리 !!
action이 뭘까? state에 접근해서 어떠한 것을 할 수 있게 하는 것
헷갈리는 쓴 용어
module이 뭘까?
- 그냥 자바스크립트 파일 하나임 !
Export 와 export default 차이
Export하는 모듈안에 수출할 함수 , 변수 등의 개수에 따라 달라짐
그냥 export 는 하나만 있을 때나 여러개 있을 때 모두 쓸 수 있음
그러나 export default는 export하는 모듈 안에 딱 하나만 들어있다는 것을 명확히 나타낼 때 쓸 수 있다.
🚨 주의할 점 : export default로 수출을 하면 import 모듈에서 중괄호 없이 import 가능
