Redux Toolkit 핵심 개념 요약

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *React 및 Redux Toolkit을 사용하는 프론트엔드 개발자** (초급~중급 난이도)

핵심 요약

• Redux Toolkit은 createSlice 함수를 통해 상태 관리 로직을 간결하게 구현할 수 있다.
• useSelector와 useDispatch 훅은 컴포넌트에서 상태를 읽고 액션을 디스패치하는 주요 방법이다.
• 스토어는 configureStore로 생성되며, Provider 컴포넌트를 통해 앱 전역에 공유된다.

섹션별 세부 요약

1. 스토어 생성

• store.js 파일에서 configureStore로 스토어를 생성하고, reducer 객체에 슬라이스를 등록한다.
• 예시: export const store = configureStore({ reducer: { movies: movieReducer } });
• Provider 컴포넌트를 통해 스토어를 앱의 최상위 컴포넌트에 전달해야 한다.

2. 슬라이스 정의

• createSlice 함수를 사용하여 name, initialState, reducers를 정의한 객체를 생성한다.
• 예시:

const movieSlice = createSlice({
  name: "movies",
  initialState: { movies: [] },
  reducers: {
    addMovie: (state, action) => { state.movies.push(action.payload); },
  },
});

• reducers 내부에서 state와 action을 인자로 받아 상태를 업데이트한다.

3. 상태 접근 및 액션 디스패치

• useSelector 훅을 통해 스토어의 상태를 읽는다.

예시: const movies = useSelector((state) => state.movies.movies);

• useDispatch 훅을 통해 액션을 디스패치한다.

예시: dispatch(addMovie(newMovie));

4. 액션과 페이로드 처리

• action.payload를 통해 액션에 전달된 데이터를 사용할 수 있다.
• addMovie 액션은 newMovie 값을 state.movies에 추가한다.

결론

• 스토어는 configureStore로 생성하고 Provider로 앱 전역에 공유해야 한다.
• 스프라이스는 createSlice로 정의하고, reducers에서 상태를 업데이트하는 방식을 사용한다.
• useSelector와 useDispatch 훅은 상태 관리 및 액션 디스패치의 핵심 도구로, 반드시 익혀야 한다.