react 복습 (Redux, react router dom)

redux란 상태관리 라이브러리라고도 함
왜 쓰냐
useState의 불편함
원래는 props를 이용해 한단계한단계 내려줬다면
redux는 예를들면 중앙데이터관리소라는 하나의 단체가 여러군데에 나눠줌 

Global state와 Local state 
Local state란 
컴포넌트에서 useState를 이용해서 생성한 state. 좁은범위 안에서 생성된 State라고 생각하면 됨.
Global state란
Global state는 컴포넌트에서 생성되지 않음 중앙 state관리소 라고 생각하면 됨.
*props로 내려주지않아도 사용가능함

export default 와 export의 차이
export default로 했으면 import할때 중괄호가 필요없고 export는 필요함

리덕스만들때
설치법 : yarn add redux redux app
state의 그룹인 modules 부터 만들고 나서 진행 
초기상태값 (state)가 필요 보통 const initialState = { } 라고 많이함 그 후 리듀서를 만들어야 하는데 
우선 리듀서는 state에 변화를 일으키는 함수라고 생각하기 input값엔 state와 action을 받음 ( 왜 state와 action이냐면 리덕스 팀에서 만들었기때문) 여기서 state는 초기상태값이기 때문에 state = initialState 라고 해줘야함
action은 type과 value가 있음.
action은 state를 어떻게 표현할껀지, state의 값에 +를 할껀지 -를 할껀지 정하는 객체 

초기상태값 initailState = { number : 0 } 를 useState로 표현하면 
const [number, setNumber] = useState(0) 이런식임

react router dom
설치법 yarn add react-router-dom
외우기 : Router.js 에서
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route />    
      </Routes>
    </BrowserRouter>
  );
};
이런형태임 Router뒤에 path만 사용하면 접근가능 

리액트에서도 useState 와 같은 hook을 제공하듯이 react-router-dom에서도 hook을 제공함 
대표적으로 
useNavigate

useLocation 

hook은 아니지만 꼭 알아야 할 API 
Link 
Link는 html태그중 a태그를 대체하는 API 만약 JSX에서 a태그를 사용하고 싶으면 반드시 Link를 써야함. 왜냐하면 a태그를 사용하면 페이지를 이동하면서 브라우저가 새로고침 되기 때문 브라우저가 새로고침 되면 
모든컴포넌트가 다시 렌더링 되어야하고 또 우리가 redux나 useState를 통해 메모리상에 구축해놓은 모든 상태값이 초기화가됨.

Dynamic Route 란
동적라우팅이라고도 말하는데 path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법