react 스터디에서 리액트를 다루는 기술이라는 책을 선정했고 이 책을 읽고 배운 것을 바탕으로 작성되었다.

📌 Redux란?

• 가장 많이 사용하는 리액트 상태 관리 라이브러리이다.
• 컴포넌트의 상태 업데이트 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다.
• 컴포넌트끼리 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 쉽게 상태값을 전달하거나 업데이트할 수 있다.
• 이때 redux는 리액트에 종속되는 라이브러리가 아니고 다른 라이브러리와 프레임워크, 바닐라 자바스크립트와 함께 사용할 수 있다.

📌 Redux 개념

✨ 액션

action

• 상태를 업데이트하는데 필요한 정보를 담은 객체이다.
• 액션 객체는 반드시 type 프로퍼티를 가져야 하는데 이 값을 액션의 이름이라고 생각하면 된다.
• 액션 이름은 고유해야 한다!

✨ 액션 생성 함수

• 액션 객체를 반환하는 함수이다.
• 매번 액션 객체를 직접 작성하기 번거로울 수 있고, 실수를 방지하기 위해 액션 객체를 함수로 관리한다.

✨ 리듀서

• 상태를 업데이트하는 함수이다.
• 현재 상태와 액션 객체를 인자로 받아 새로운 상태를 반환한다.
• 이때 현재 상태를 받는 첫 번째 인자에 초기 상태를 기본 인자로 설정한다.
  • state가 undefined일 때 초기 상태값이 사용된다.
• 인자로 받은 현재 상태의 불변성을 유지하면서 업데이트된 새로운 상태를 반환해야 한다.

✨ 스토어

• 프로젝트에 리덕스를 적용하기 위해 store를 생성해야 한다.
• createStore 함수의 인자로 root reducer를 넣어 호출한다.
• 스토어에는 상태와 리듀서가 있으며 여러 내장함수도 있다.

import { createStore } from "redux";
const store = createStore(reducer);
// store.getState(); -> 상태 접근
// store.dispatch(액션생성함수); -> 상태 업데이트
// store.subscribe(리스너 함수); -> 리스너 등록

✨ 디스패치

• dispatch는 스토어 내장 함수 중 하나로 액션을 dispatch하는 함수이다.
• 액션 객체를 인자로 받아 이를 리듀서 함수로 전달하여 실행하는 함수이다.

✨ 구독

• subscribe도 스토어 내장 함수 중 하나이다.
• 리스너 콜백 함수를 인자로 받아 호출하면, 액션이 dispatch되어 상태가 업데이트될 때마다 리스너 함수가 호출된다.

💡 주의해야 할 점

✔ 단일 스토어

• 하나의 애플리케이션에는 하나의 스토어만 운영하는 것을 지향한다.

✔ 읽기 전용 상태

• 리덕스 상태는 읽기 전용이다.
• 즉, 기존 상태의 불변성을 유지하면서 업데이트된 새로운 상태를 생성해야 한다.
  참고 : React에서 상태의 불변성을 지키는 것이 중요한 이유

✔ 리듀서는 순수한 함수

• 리듀서 함수는 현재 상태(state)와 액션 객체(action)를 인자로 받는다.
• 파라미터 외의 값에는 의존해선 안된다.
• 인자로 받은 상태는 건드리지 않고, 변화를 준 새로운 상태를 반환한다.
• 똑같은 인자로 호출되면 항상 똑같은 결과 값을 반환해야 한다.