[240525 WIL] Context API, RTK 정리

폭풍같은 한 주가 지나갔습니다!
한 주를 정리하며 이번 주의 메인 테마(?) 였던 Context API 와 Redux-Toolkit 의 사용법을 다시한번 정리해 보려고 합니다.

Context API

기본설정

1. Context 생성 : createContext()
2. Provider 로 상위 컴포넌트 감싸기 : <콘텍스트명.Provider></콘텍스트명.Provider>
3. 사용할 컴포넌트에서 사용 : useContext(콘텍스트명)

이게 끝! 인데, 편하게 사용하려면 파일을 커스텀 훅까지 2개 만들면 좋습니다.

1. src/context/콘텍스트.tsx
2. src/hooks/커스텀훅.tsx

콘텍스트.tsx

//context.tsx
import { ReactNode, createContext, useEffect, useState } from "react";

interface Props {
    children: ReactNode;
}

// 콘텍스트 생성
const MyContext = createContext<사용할타입인터페이스 | null>(null);

// 프로바이더 생성!
export const MyProvider = ({ children }: Props) => {
    // 여러가지 스테이트 등등 할 일들 ....
    return(
        <MyContext.Provider value={ 
            // 여기다 스테이트 등등 이것저것 넣어줍니다.
        }>
            {children}
        </MyContext.Provider>
    )
})

그리고, 사용할 범위(최상이라면 App.tsx 등)에서 MyProvider 로 감싸주고...

커스텀훅.tsx

//cutomHook.tsx
import MyContext from "@/context/MyContext";
import { useContext } from "react";

const useMyContext = () => {
    const context = useContext(MyContext);

    if (context === null) {
        throw new Error("오류 발생! 오류발생! 훅은 프로바이더 안에서 써줘요잉");
    }

    return context;
};

export default useMyContext;

사용법

이렇게 하면 아래와 같이 한 층 편하게 쓸 수 있습니다~!

// 사용할 컴포넌트.tsx
import useMyContext from "@/hooks/useMyContext";

export default function MyComponents () {

    const { 쓸것, 쓸것등등등 } = useMyContext();

    // 마음껏 쓰세요~~
    return(
        {/* 마음껏 쓰세요~~ */}
    )
}

Redux-Tool Kit

기본설정

1. slice 생성 createSlice({ options })
2. store 생성 configureStore({ options })
3. Provider 로 상위 컴포넌트 감싸기
4. 사용할 컴포넌트에서 사용 useDispatch(), useSelector

역시 이게 끝! 인데 커스텀 훅을 하나 만들었더니 사용하기 편리합니다(action creator)

slice.tsx

// slice.tsx
import { PayloadAction, createSlice } from "@reduxjs/toolkit";

// initialState 정의
const initialState: { count : number } = {
    // 초기값 정의~~~
    // 예시로 카운트
    count : 0;
};

// 슬라이스 만들기
export const mySlice = createSlice({
    name : "슬라이스명", // 슬라이스의 이름을 정의합니다. 이 이름은 액션 타입을 생성할 때 사용됩니다.
    initialState, // 위에서 만든 초기값 넣어주고
    reducers : { // 리듀서 정의: 상태를 변경하는 함수들을 정의합니다.
        // 만약 addCount 라는 더하기 리듀서를 만든다면 아래처럼
        // 각 리듀서는 state, action 을 인자로 받는다 
        addCount: (state, action: PayloadAction<number>) => {
            // immer 덕분에 불변성 신경은 안써도 됨
            state.count += action.payload; 
        } 
    }
});

// 리듀서 액션들 내보내기
// 여러개라면 모두 내보내 줘야 함
export const { addCount } = mySlice.actions;

// 리듀서 자체 내보내기
const myReducer = mySlice.reducer;
export default myReducer;

store.tsx

// store.tsx
import { configureStore } from "@reduxjs/toolkit";
import myReducer from "./Slice";

// 스토어에 리듀서 등록
const store = configureStore({
    reducer: {
        // 프로퍼티명 작명은 자유이나 예시로 myCount
        myCount: myReducer,
    },
});


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


export default store;

Provider 로 상위 컴포넌트 감싸기

// App.tsx
import { Provider } from "react-redux";
import store from "./redux/Store";

function App(){
    // store에 위에서 만든 store를 넣어준다
    return(
        <Provider store={store}>
            {/* 뭔가 요소들 */}
        </Provider>
    )
}

일반적인 사용법

// 사용할 컴포넌트
import { AppDispatch, RootState } from "@/redux/Store";
import { useDispatch, useSelector } from "react-redux";
import { addCount } from "@/redux/Slice";

export default MyComponent () {
    const dispatch = useDispatch<AppDispatch>();
    // 요기 useSelector 콜백 패턴에 주의
    const counts = useSelector((state: RootState) => state.myCount.count);

    const handleClick = (num : number) => () => {
        // 아래와 같이 사용 
        dispatch(addCount(num));
        // rtk 의 전역 state 에 접근 가능
        console.log(counts)
    }

    return(
        <>
            <button onClick={handleClick(1)}>눌러봐</button>
        </>
    )
}

커스텀 훅(Action Creator) 사용법

// src/hooks/useCount.tsx
import { AppDispatch, RootState } from "@/redux/Store";
import { useDispatch, useSelector } from "react-redux";
import { addCount } from "@/redux/Slice";

// 커스텀 훅 정의
function useCount() {
    // Redux의 dispatch 함수를 사용하기 위한 설정
    const dispatch = useDispatch<AppDispatch>();

    // Redux의 상태를 선택하기 위한 설정
    const counts = useSelector((state: RootState) => state.myCount.count);

    // 아래와 같이 Action Creator를 만듭니다!
    const increaseCount = (value: number) => dispatch(addCount(value));

    // 현재 카운트 값을 반환하고, Action Creator를 반환합니다.
    return {
        counts, // 현재 상태 값 반환
        increaseCount, // 상태 변경 함수 반환
    };
}

export default useCount;

// 사용할 컴포넌트에서 커스텀 훅 사용하듯이 사용하면 됩니다.
import useCount from "@/hooks/useCount";

export default function MyComponent () {
    const { counts, increaseCount } = useCount();

    const handleClick = (num : number) => () => {
        increaseCount(num);
        console.log(counts);
    }

    return (
        <>
            <button onClick={handleClick(1)}>눌러봐</button>
        </>
    )
}