6주차 로그

리액트를 공부하면서 상태관리라는 것을 알게되었다.
평소 백엔드 개발을 주로 하다보니 프론트에서 어떤 것을 사용하는지 잘 몰랐는데, 나만 모르고 있었던 것 같다...

기본적으로 많이 사용하고 있는 건 Redux 인 것 같은데, 최근 많은 라이브러리들이 나와있다. 그래서 이전의 사용하는 건 Redux 였지만 최근 프로젝트는 다른 라이브러리를 사용하는 것 같다. 하지만 나는 기본적인 것을 먼저 배우는 것을 선호하기 때문에 Redux 를 적용해보기로 했다.

Redux 란?

• JavaSciprt 및 TypeScript 웹 & 앱의 상태 관리를 위한 라이브러리
• 애플리케이션의 모든 상태는 Redux store 에 저장되며, 상태 변경을 유지하면서 action 을 통해 Store의 상태를 업데이트 함
• 전역 상태 관리를 지원하며, 단방향 데이터 흐름을 따름
• 핵심 개념은 “단 하나의 스토어”, 모든 상태의 하나의 스토어에 저장되며, 스토어의 상태는 불변성을 유지
• 상태를 직접 수정하는 것이 불가능하며, 새로운 상태를 반환하는 방식으로 상태를 변경

Action

• 애플리케이션의 상태를 하나의 스토어에서 관리하고 이를 변경하기 위해 액션을 발생시킴
• 일종의 객체로 반드시 type 속성을 가지며, 다른 임의의 속성들을 가질 수 있음
• 액션을 발생시키면 리듀서가 이를 처리하여 상태를 변경

Reducer

• 이전 상태와 액션을 받아 새로운 상태를 반환하는 함수
• 액션을 생성한 후 리듀서에 전달하는 과정을 통해 상태를 변경

store

• 리덕스에서 스토어는 애플리케이션의 상태를 저장, 액션을 디스패치해서 상태를 업데이트하고 상태 변화를 구독할 수 있는 객체
• createStore 함수를 통해 생성됨 - 리덕스 4버전 이하
  • 첫 번째 인자로 리듀서 함수를 받고
  • 두 번째 인자로 초기 상태 값을 받음
• configureStore 함수를 통해 생성 - 리덕스 4버전 이상
• 이 스토어 객체는 dispatch, getState, subscribe, replaceReducer 등의 메서드를 가지고 있음

dispatch

• 스토어의 내장 함수 중 하나
• 액션을 발생시키는 것으로 이해하면 됨
• dispatch(action) 과 같은 형태로 액션 객체를 파라미터로 넣어서 호출
• 일반적으로 리액트 애플리케이션에서는 useDispatch 훅을 사용해 스토어의 디스패치 메서드에 접근할 수 있음
  • useDispatch 훅은 리덕스 스토어에서 dispatch 메서드를 반환함

subscribe

• 스토어의 내장 함수 중 하나
• 구독 함수는 스토어에서 상태가 변경될 때마다 호출되는 콜백함수를 등록하는 메서드
• 구독 함수를 사용하면 상태가 변경될 때마다 UI를 업데이트하거나 다른 작업을 수행할 수 있음
• store.subscribe 를 통해 구독을 등록할 수 있고, 메서드는 콜백 함수를 인자로 받음
• 콜백 함수는 상태가 변경될 때마다 호출되고, 현재 스토어 상태를 인자로 받을 수 있어, 일반적으로 이를 통해 UI를 업데이트 함
  • UI 라이브러리와 함께 사용할 때는 보통 useEffect 훅과 같은 라이프사이클 메서드를 사용하여 구독 함수를 등록하고, 등록된 콜백 함수에서 UI 를 업데이트 함

configureStore

• Redux Tookit 에서 제공하는 함수로, Redux store 를 생성하기 위해 사용됨
• Redux 애플리케이션의 store 는 state를 보유하고 state 의 변화를 관리하는 저장소

createSlice

• Redux 에서 action의 type 정의, action의 함수, reducer 를 따로 작성해야 하는 번거로움 있어서, tookit 에서 제공하는 함수
• 번거로운 작업을 한 번에 정의할 수 있음
• configureStore 함수 안에 작성한 userSlice 정의

위와 같은 내용들이 있고, 아래 코드는 간단하게 Redux 를 적용해서 로그인 상태를 저장하는 코드이다. 단순하게 로그인이 성공했으면 True, 아니면 False 가 되도록 해두었다.

우선 Slice 를 작성한다.
이름을 지정하고, 기본값을 false 로 지정, Reducer를 작성하면 된다.
login 을 호출하는 경우 isLogin 값이 true 가 되고, logout 을 호출하는 경우 false 가 되는 간단한 코드이다.
그리고 export 를 해줘야 다른 곳에서 사용이 가능하다.

export const loginSlice = createSlice({
    name: 'auth',
    initialState: { isLogin: false},
    reducers: {
        login: state => {
            state.isLogin = true;
        },
        logout: state => {
            state.isLogin = false;
        },
    },
})


export const { login, logout } = loginSlice.actions;
export default loginSlice.reducer;

그리고 store 를 생성해서, 위에서 작성한 Reducer 를 등록한다.

const store = configureStore({
    reducer: { auth: loginSlice.reducer},
    // middleware: [...middlewares]
})


export default store;

export type RootState = ReturnType<typeof store.getState>;

작성한 store 를 Provider 로 등록을 해줘야한다.

import store from "./Redux/Store/store";

root.render(
  <React.StrictMode>
      <Provider store={store}>
    <App />
      </Provider>
  </React.StrictMode>
);

이제 상태관리를 실제로 사용하는 부분이다.
서버쪽으로 로그인 요청을 보낸 후에, 성공한 경우에 dispatch(login()) 을 호출하여 현재 로그인 상태로 변경한다.

const dispatch = useDispatch();

 const loginAction = () => {
        const form = new FormData();
        form.append("id", id);
        form.append("pw", password);

        axios({
            // 로그인 처리
        })
        .then((result)=>{      
            dispatch(login());
            navigate("/");
        })
        .catch((error)=>{      
            console.log(error)
        })
    }

현재 로그인 상태인지 판단하여 다른 로직을 보여줘야 하는 경우 아래와 같이 사용한다.

const auth = useSelector((state: RootState) => state.auth.isLogin);

// auth 값을 사용해서 true, false 비교

이상으로 간단하게 Redux 를 사용하는 방법을 적용해 보았고, 다음엔 게시판을 업로드할 때 사용하는 것을 적용해 볼 예정이다.