1) 전역 상태 관리

1. 전역 상태

리액트는 기본적으로 단방향 데이터 흐름(부모 → 자식)을 따릅니다.

하지만 로그인한 사용자정보나 전체 앱설정정보(API BASE URL, UI설정(로딩 상태, 테마) 등)와 같이 여러 컴포넌트에서 공용으로 사용하는 데이터는 컴포넌트 전역에서 사용하도록 관리하는게 좋습니다. (props로 여러 단계의 컴포넌트로 데이터를 전달하여 공유하는 작업은 매우 불편하며 관리가 힘들다.)

리액트에서는 전역상태관리를 도와주는 다양한 라이브러리들이 존재하나, 수업에서는 회사에서 많이 사용하는 Redux를 활용한 전역상태관리를 메인으로 수업합니다.

2. Context

• 리액트에서 기본으로 지원하는 전역상태관리 도구로 단순한 형태의 어플리케이션에서 사용하기에 적합한 도구입니다. 단, 관리할 상태가 많을 수록 관리가 힘듭니다.

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  return ( 
    <AlarmContext.Provider value={{ alarm ....}}>
    <ThemeContext.Provider value={{ theme .... }}>
    <CartContext.Provider value={{ cart ....}}>
    <ABCContext.Provider value={{ abc ....}}>
      {children}
    </ABCContext.Provider>
    </ThemeContext.Provider>
    </CartContext.Provider>
    </AlarmContext.Provider>
  );
}

function SomeComponent() {
  const { theme } = useContext(ThemeContext);
  return <div>현재 테마: {theme}</div>;
}

3. Redux

• 복잡한 상태관리에 사용되는 라이브러리로 대규모 어플리케이션에서 사용합니다.

• 리덕스로는 컴포넌트 전역에서 사용하는 인증정보, 사용자 정보, 어플리케이션 테마 및 설정정보 및 전역으로 관리되는 UI상태값 등을 중앙저장소(Store)에 저장하고 관리합니다.

• 단, 컴포넌트단위로 관리되어야 하는 일반 state들은 Redux로 관리하지 않습니다.

1) Redux의 핵심 개념

1. Store (저장소)

   • 애플리케이션의 모든 전역 상태(state)가 저장되는 곳.

   • 하나의 앱에는 하나의 Store만 존재.

2. State (상태)

   • Store 안에 들어 있는 실제 데이터.

   • 읽기 전용이며, 직접 수정할 수 없음.

3. Action (행동, 명령 객체)

   • 상태를 변경하라는 요청을 담은 객체.

   • { type: "user/login", payload: {id: 1, name: "홍길동"} } 형태로 구성.

4. Reducer (상태 변경 함수)

   • Action을 받아서 새로운 상태를 반환하는 함수.

   • (state, action) => newState 형태.

5. Dispatch (전송)

   • Action을 Store에 전달하는 함수.

   • dispatch({ type: "user/login", payload: {...} })

6. Selector (조회)

   • Store에서 원하는 데이터를 꺼내오는 함수.

   • useSelector(state => state.user)

2) Redux 동작 흐름

• FLUX아키텍처에서 Dispatcher를 제거하여 흐름을 더욱 단순화 시켰다.

1. 사용자가 onClick, onChange와 같은 이벤트를 호출하여 Action Creators가 호출되고, Action객체가 생성

2. 생성된 Action은 dispatch함수를 통해 store로 전달

3. Store는 이전 상태값과 action을 Reducer에게 전달

4. Reducer가 상태 변경 로직 실행 후 새로운 State 반환

5. Store는 변경된 State를 저장하고, 이를 구독 중인 컴포넌트들에게 알림

   1. useSelector를 통해 구독

6. UI가 자동으로 리 렌더링

3) Redux 라이브러리 설치 코드

npm install redux react-redux @reduxjs/toolkit