Context API와 Redux

컴포넌트 상태 종류

Local	각각의 컴포넌트가 소유하고 있는 상태를 의미. 이 상태는 해당 컴포넌트 내에서만 관리되고 사용됨
Cross-Component	두 개 이상의 컴포넌트 간에 공유되는 상태를 의미하며 props를 통해 상태를 전달
App-Wide State	애플리케이션의 전체 영역에서 사용되는 상태. 여러 컴포넌 트, 혹은 앱의 전체 영역에서 공유되어야 하는 데이터나 상태에 사용됨
= > Cross-Component와 App-Wide State 일 때 Context API나 Redux가 요구됨

 

Context API

React version 16부터 사용 가능한 리엑트의 내장 API

컴포넌트 아래로 props를 사용하지 않고 필요한 데이터 state를 쉽게 공유할 수 있도록 해주는 것

React 앱의 모든 컴포넌트에게 일괄적으로 데이터를 전달할 때 유용하다.

 

Context API를 사용해야 하는 경우

리엑트는 일방향 전달이라 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨주어야 한다.

하지만 중간에 여러 컴포넌트를 거쳐야 하거나 앱의 여러 컴포넌트가 동일한 데이터를 필요로 한다면  props만으로 해결하기엔 한계가 명확하다.

계속 props를 넘겨줘야 하는 prop drilling이 발생하기 때문이다.

간혹 데이터가 필요한 컴포넌트가 데이터를 전달하는 부모 컴포넌트 사이에 중간 컴포넌트가 존재할 수 있는데, 그럴 때 대상 컴포넌트로 데이터를 즉각 전달할 수 있다.

즉, 컴포넌트의 깊이 여부와 무관하게 데이터가 필요한 컴포넌트에서 불러다가 사용할 수 있는 것이다.

Context API는 주로 어디에 사용할까?

• Context API를 통해 전달하는 데이터의 종류

테마 데이터 (다크 모드, 라이트 모드)
사용자 데이터 (현재 인증된 사용자)
언어 혹은 지역 데이터

 

• Context API는 자주 업데이트할 필요가 없는 데이터에 사용한다.

Context API에서 State값을 변경하면, Provider로 감싼 모든 자식 컴포넌트들이 리렌더링되므로 전역 상태 관리를 위한 도구가 아닌, 데이터를 쉽게 전달하고 공유하기 위한 목적으로 사용하는 것이 적합하다.
따라서 Context는 리액트에서 컴포넌트를 위한 전역 변수의 개념으로 생각하면 된다.

 

 

Context API의 장점

React 내장 기능	Context API는 React에서 기본적으로 제공하는 기능입니다. 추가 라이브러리 없이 상태를 하위 컴포넌트로 전달할 수 있도록 도와줍니다.
간단한 상태 관리	주로 애플리케이션 내에서 단순한 상태를 전역적으로 관리할 때 사용됩니다.
렌더링 최적화	Context API는 상태가 바뀌면 그 상태에 의존하는 컴포넌트만 리렌더링됩니다. 그러나 너무 많은 컴포넌트가 상태를 공유할 때 성능 이슈가 발생할 수 있습니다.

 

 

Context API의 단점

다뤄야 할 상태 규모가 커지고 복잡해지면 관리하기 어려울 수 있다.

상태를 관리하는 로직이 컴포넌트 트리 안에 섞이기 때문에 대규모 애플리케이션에서는 유지 보수가 어려워진다.

 

 

Context API 사용 방법

1. createContext 메서드를 사용하여 context를 생성한다.

2. 셍성한 context를 대상 컴포넌트에 값을 내려주기 위해 Provider로 대상 컴포넌트를 감싼다.

3. Provider의 프로퍼티인 value에 전달할 데이터를 넣는다.

4. Provider의 value에 담은 데이터를 전달할 때는 두가지 방식의 전달이 가능하다.

Consumer 컴포넌트 또는 useContext라는 훅을 사용하는 방법이다.

 

4-1. 기본 예제 코드 - Consumer 컴포넌트를 사용하는 방법

 

import { createContext } from ‘react’;

export const themeContext = createContext(전달할 데이터의 초기값);
export default function App() {
  return (
    <themeContext.Provider value={전달할 데이터}>
      <Theme />
    </themeContext.Provider>
  )
}

function Theme() {
  return (
    <themeContext.Consumer>
      {value => <div>{value}</div>}
    </themeContext.Consumer>
  )	
}

 

4-2. 기본 예제 코드 - useContext() Hook을 사용하는 방법

(리액트 hook이 도입된 16.8 버전부터 사용 가능하게 된 방법이며, 그때 이후론 주로 이 방법 사용)

 

import { createContext, useContext } from ‘react’;

export const themeContext = createContext(전달할 데이터의 초기값);
export default function App() {
  return (
    <themeContext.Provider value={전달 데이터}>
      <Theme />
    </themeContext.Provider>
  )
}

function Theme() {
  const theme = useContext(themeContext);
  return <div>{theme}</div> // Provider에서 value로 전달한 데이터 출력
}

 

 

예제 코드

• 예제 코드 출처: 생활코딩 React - Context API
• 예제 코드 링크: https://stackblitz.com/edit/react-5q9wbc?file=src%2FApp.js

import React, { createContext, useContext } from 'react';
import './style.css';
const themeDefault = { border: '10px solid red' };
const themeContext = createContext(themeDefault);
export default function App() {
  const theme = useContext(themeContext);
  return (
    <themeContext.Provider value={{ border: '10px solid blue' }}>
      <div className="root" style={theme}>
        <h1>Hello World</h1>
        <Sub1 />
      </div>
    </themeContext.Provider>
  );
}

function Sub1() {
  const theme = useContext(themeContext);
  return (
    <themeContext.Provider value={{ border: '10px solid green' }}>
      <div style={theme}>
        <h1>Sub1</h1>
        <Sub2 />
      </div>
    </themeContext.Provider>
  );
}

function Sub2() {
  const theme = useContext(themeContext);
  return (
    <div style={theme}>
      <h1>Sub2</h1>
      <Sub3 />
    </div>
  );
}

function Sub3() {
  const theme = useContext(themeContext);
  return (
    <div style={theme}>
      <h1>Sub3</h1>
    </div>
  );
}

 

---

redux란?

• Javascript 상태관리 라이브러리 중에 하나

• 리액트를 배울 때 많이 나오는 용어지만, 꼭리액트에 종속되는 개념은 아님

• 리액트의 상태 관리 라이브러리로 가장 많이 사용됨.

 

redux 사용 이유

Context API와 동일하게 컴포넌트 수가 많은 대형 프로젝트에서는 state를 전해주기 위해 props를 엄청나게 많이 써야 하는 경우가 발생하기 마련이다.

redux 역시 state를 props로 전달하지 않고 store라는 곳에서 언제든지 꺼내고 업데이트 할 수 있도록 고안된 라이브러리 중 하나라고 보면 된다.

 

redux 용어 정리

 

 

용어	의미
Store	redux에서 데이터의 상태를 관리하는 오직 하나의 공간 스토어 안에는 현재 어플리케이션 상태와 리듀서들이 들어 있음 하나의 프로젝트는 단 하나의 스토어만을 가질 수 있음 스토어 내 데이터의 직접적인 조작은 불가능하며 오로지 리듀서 함수를 사용한 조작만을 허용하고 있음
Action	• 상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생 • Action은 컴포넌트에서 store에 운반할 데이터를 말함. • Action은 하나의 객체로 표현됨. • 리듀서가 수행할 작업을 설명
Dispatch	dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출되며, 액션을 발생시키는 역할을 담당하고 있음
Reducer	리듀서는 액션의 type에 따라 변화를 일으키는 함수 첫번째 매개 변수는 현재 상태값, 두번째 매개 변수는 Action값을 받음 하나의 커다란 리듀서에 여러개의 리듀서를 담아서 사용할 수 있음

 

redux의 장점

외부 라이브러리	React에 의존하지 않으며, React와 함께 사용할 수 있는 독립적인 상태 관리 라이브러리입니다.
중앙 집중식 상태 관리	모든 상태를 하나의 "스토어"에서 관리하고, 이 상태는 애플리케이션 전역에서 접근 가능합니다.
액션과 리듀서	상태를 변경하는 것은 반드시 액션과 리듀서를 통해서만 이루어집니다. 이는 상태 변경 로직을 예측 가능하게 만듭니다
미들웨어 지원	redux-thunk나 redux-saga와 같은 미들웨어를 사용해 비동기 로직을 처리할 수 있어 복잡한 비동기 작업에 유용합니다.

 

redux의 단점

설정과 구현이 상대적으로 복잡합니다. Context API에 비해 더 많은 boilerplate 코드(예: 액션, 리듀서 등)를 작성해야 합니다.

작은 애플리케이션에서 사용하기에는 오버킬일 수 있습니다.

 

 

 

---

redux를 애플리케이션에 적용하는 방법

1. redux를 사용하는데 필요한 모듈을 npm을 활용해 일괄적으로 프로젝트에 추가한다.

@reduxjs/toolkit? • Redux의 복잡성을 줄이기 위해 만들어진 도구로 액션 생성, 리듀서, 미들웨어 등 Redux와 관련된 기능을 효율적으로 구현해놓은 툴이다.

2. redux를 프로젝트에 추가하기 위해 root나 app으로 되어 있을 루트 파일에 Provider를 추가한다.

3. redux를 설정하기 위하여 createSlice()를 사용해서 기본적인 세팅을 해준다.

4. store에 reducer 들을 세팅하고, action을 프로젝트에서 사용할 수 있도록  export한다.

5. 설정한 state 값을 조화하려면 useSelector를 사용하여 데이터를 조회하면 된다.

리덕스 store의 상태 값을 조회하기 위한 hook 함수로 인자로 함수를 넘겨줘야함 그 함수는 state를 매개변수로 받을 수 있고, return 값은 원하는 state 변수 값을 설정하여 사용한다.

6. 세팅한 데이터를 바탕으로 action 함수를 실행하기 위해 useDispatch를 사용한다.

• Action을 발생시키는 dispatch 함수를 실행하는 hook 함수로 인자로 원하는 타입의 Action 이름을 넘겨줘야 함.

7.  크롬의 확장 프로그램인 Redux DevTools을 활용하면 스토어의 현재 상태를 개발자 도구처럼 확인하며 개발을 진행하는 것이 가능하다.

8. 단, 해당 툴이 redux의 상태를 인식하게 하려면, 프로젝트에 @redux-devtools/extension이 들어 있어야 한다.

npm install--save @redux-devtools/extension

9. store의 상태를 확인하기 위해 해당 함수를 store에 추가 시키면 툴을 사용할 수 있다.