전역 상태 관리를 위해서 store를 생성한다.
이렇게 초기 상태를 초기화하고, 상태가 바뀌면 업데이트 되는 방식
Store.js
initState 객체를 초기화 해보자. 로그인 여부를 알 수 있는 것으로
여기서 reducer는 콜백 함수이다.
다시 reducer 콜백함수로 돌아와서..
state로 초기화 상태를 받아오고, action은 동작함수를 넣어야 되는데
state는 오브젝트 이구나 하고 생각하면 된다.
이렇게 switch 구문을 reducer 안에 작성한다.
우리 아직 action.type이 뭔지 모르는 상황
제일위에 export를 만들고 함수를 명시해주면, 다른 곳에서 사용이 가능하다.
그냥 가져다 쓰고 싶으면 export 다 붙이면 되고, public이랑 비슷한 개념
람다식으로 표현
그냥 기본타입은 중괄호가 필요없지만,
오브젝트라면 이렇게 중괄호와 괄호로 감싸면 이렇게 한 줄로 표현이 가능하다.
공유해서 쓰는 것들은 사이드 이펙트가 생길 확률이 높다.
그래서 서버에서의 함수형 프로그래밍은 사이드 이펙트가 생길 확률이 높고,
플러터 같은 것은 혼자 쓰는 환경이기 떄문에 사이드 이펙트가 생기지 않는다.
함수형 프로그래밍으로 상태를 인수로 넘겨주어야지 사이드이펙트가 발생하지 않는다.
파일을 두개만 만들까?
login.js 랑 loginComplete.js 를 만든다.
loginProcess 로직
우린 3단계는 건너뛰고 구현
리액트 유효성 검사 라이브러리가 있다면 그냥 쓰자.
왜냐하면 코드가 깔끔해지니까!!
라우터에도 등록!
주소가 생길때마다 여기다가 등록하면 된다.
import React from "react";
import { useNavigate } from "react-router-dom";
function Login(props) {
const navigate = useNavigate();
function loginProcess() {
// 1. form 태그 username, password 가져오기
// 2. 유효성 검증
// 3. 통신
// 4. store 상태변경
// 5. 화면 이동
navigate("/loginComplete");
}
return (
<div>
<button onClick={loginProcess}>로그인</button>
</div>
);
}
export default Login;
Java
복사
import React from "react";
function LoginComplete(props) {
return (
<div>
<h1>Login 완료</h1>
<h2>store isLogin : true</h2>
</div>
);
}
export default LoginComplete;
Java
복사
nav에도 등록
nav를 조금 디자인해보자.
선생님 디자인
import React from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";
const SyNav = styled.div`
display: flex;
justify-content: space-around;
`;
function Nav(props) {
return (
<SyNav>
<Link to="/">홈</Link>
<Link to="/about">소개</Link>
<Link to="/login">로그인화면가기</Link>
</SyNav>
);
}
export default Nav;
Java
복사
dispatch 훅을 만들어 보자.
왜 reducer로 상태를 변경할까??
깊은 복사하기 위해서, 그리고 이걸 사용하면 유효성 검사나 이런것들을 알아서 해준다.
이렇게 사용하면, reducer의 액션 함수에 true를 넘겨준다.
근데, 이 방법이 좋지 않은게 타입을 동일하게 맞춰야 된다는 것이다.
여기서 true로 되어있지만, 위에 가서 확인해보면 타입을 LOGIN 또는 LOGOUT으로 바꿔야되고, 이것 때문에 타입을 일일이 확인하는 게 불편하다.
그래서 이렇게 login.js 를 export하고 이렇게 사용할 수 있다.
로그인 코드는 끝났지만, 전체를 감싸는 프로바이더가 필요!!
인덱스 js에서 Provider설정을 해주자
configueStore 사용설명
npm install @reduxjs/toolkit react-redux
Java
복사
index.js 코드
import { configureStore } from "@reduxjs/toolkit";
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App";
import reducer from "./store";
const root = ReactDOM.createRoot(document.getElementById("root"));
const store = configureStore({
reducer: reducer,
});
root.render(
<Provider store={store}>
<App />
</Provider>
);
Java
복사
선생님 강의 노션
store는 창고이다. 창고의 상태는 initState
reducer가 창고,
어떤 액션이 들어올때 마다 어떻게 상태를 변경할 건지 설정