📖 TIL - Context API와 Redux Toolkit 구현 가이드 📝

✨ Context API 구현 순서

1. Context와 Provider 생성

// LoginContext.js
import { createContext, useState } from "react";

export const LoginContext = createContext();
export const LoginProvider = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <LoginContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
      {children}
    </LoginContext.Provider>
  );
};

2. App에 Provider 적용

// App.js
function App() {
  return (
    <LoginProvider>
      <Home />
    </LoginProvider>
  );
}

3. Context 사용하기

const { isLoggedIn, setIsLoggedIn } = useContext(LoginContext);

🚀 Redux Toolkit 구현 순서

1. 패키지 설치

npm install @reduxjs/toolkit react-redux

2. Store 설정

// store.js
import { configureStore } from '@reduxjs/toolkit';
import todoReducer from './features/todoSlice';

export const store = configureStore({
  reducer: {
    todo: todoReducer,
  },
});

3. Slice 생성

// todoSlice.js
const todoSlice = createSlice({
  name: 'todo',
  initialState,
  reducers: {
    addTodo: (state, action) => {
      state.todos.push(action.payload);
    },
    // ... 다른 리듀서들
  },
});

4. Provider 설정

function App() {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  );
}

5. 컴포넌트에서 사용

const dispatch = useDispatch();
const todos = useSelector((state) => state.todo.todos);

⭐️ 참고

• Context API는 간단한 전역 상태 관리에 적합
• Redux Toolkit은 복잡한 상태 관리나 큰 규모의 프로젝트에 적합