React / 전역 상태 관리 (1) - 내부

 

React는 대표적인 SPA(Single Page Application) 라이브러리다.
SPA는 상태가 변경될 때 이를 감지해 필요한 부분만 리렌더링 하는 방식으로 동작하기 때문에, 상태 관리가 매우 중요하다.

 

React에서 상태를 관리하는 방식으로는 크게 두 가지로 나눌 수 있다.

내부	외부
useState ContextAPI	Redux, Redux Toolkit Recoil, MobX, Zustand, Jotai ...

 

 

 

---

 

 

 

전역 상태관리의 장점

Props Drilling

 

상위 컴포넌트에서 하위 컴포넌트에게 데이터를 전달 할 때, 직접적으로 사용하지 않는 중간 컴포넌트들까지 props를 계속 넘겨줘야 하는 현상을 의미한다.

 

이전에 했던 todo list 만들기에도 props drilling을 찾아볼 수 있다. (길이가 길어져서 상태 외 내용은 생략했다..)

 

function App() {
  const [isLoading, data] = useFetch('http://localhost:3000/todo');
  const [todo, setTodo] = useState([]);

  useEffect(() => {
    if (data) setTodo(data);
  }, [isLoading]);

  return (
    <>
      <TodoInput setTodo={setTodo} />
      <TodoList todo={todo} setTodo={setTodo} />
    </>
  );
}

const TodoInput = ({ setTodo }) => {
  const inputRef = useRef(null);
  const addTodo = () => {
    const newTodo = {
      // 생략
  };
  return (
    <div className="todo-input">
      <input ref={inputRef} />
      <button onClick={addTodo}>추가</button>
    </div>
  );
};

const TodoList = ({ todo, setTodo }) => {
  return (
    <ul className="todo-list">
      {todo.map((el) => (
        <Todo key={el.id} todo={el} setTodo={setTodo} />
      ))}
    </ul>
  );
};

// UPDATE, DELETE
const Todo = ({ todo, setTodo }) => {
  const [isEdit, setIsEdit] = useState(false);
  const [editValue, setEditValue] = useState(todo.content);

  // 너무 길어서 생략..............

  return (
    <li>
      {isEdit ? (
        <>
          <input value={editValue}
            onChange={(e) => setEditValue(e.target.value)} />
          <div className="btn-container">
            <button onClick={updateTodo}>저장</button>
            <button onClick={() => setIsEdit(false)}>취소</button>
          </div>
        </> ) : (
        <>
          <div>{todo.content}</div>
          <div className="btn-container">
            <button onClick={editHandler}>수정</button>
            <button onClick={deleteTodo}>삭제</button>
          </div>
        </>
      )}
    </li>
  );
};

 

 

기존 방식

 

코드를 보면 const [todo, setTodo] = useState([])를 사용하고 있는 곳이 Todo와 TodoInput 컴포넌트인데, 두 컴포넌트 모두에게 상태를 넘겨주기 위에서는 최상위 컴포넌트인 App에서 상태를 생성해 props를 넘겨줄 수 밖에 없다.

이때 TodoList 컴포넌트에서는 사용하지 않고 있어도 Todo 컴포넌트에서 사용해야 하기 때문에 오직 전달 목적으로 props를 넘겨주고 있는데, 드릴질 하는 것처럼 Props를 계속 내려준다고 하여 Props Drilling 현상이라고 한다.

 

 

지금의 경우는 컴포넌트가 3단계 깊이의 계층이고, 컴포넌트의 개수도 적어서 아직까진 크게 문제가 없지만 만약 그 깊이가 더 깊어지고 컴포넌트의 개수가 늘어나고 상태들이 늘어난다면 여러 문제점이 발생한다.

• 컴포넌트의 구조가 더 복잡해짐
• 코드의 가독성이 매우 떨어지고 유지 보수가 어려워짐
• props를 전달하는 과정에서 중간에 전달 목적으로만 관여하게 된 컴포넌트들까지 리렌더링이 발생 => 성능 저하

 

useState로만 상태를 관리하면 아무리 체계적인 설계여도 규모가 커지면 이러한 부작용이 발생할 수 있다.

때문에 여러 컴포넌트에서 상태를 사용하기 위해 전역 상태 관리를 할 수 있게 해주는 도구가 필요하다

 

 

전역 상태 관리 도구를 사용했을 때

 

 

전역 상태 관리 도구를 사용하면 App에서 직접 상태를 만들지 않아도 되며, 중간에 고통받던 TodoList도 props 전달을 하지 않아도 되는 것을 볼 수 있다. 때문에 규모가 큰 프로젝트일수록 이 방법으로 사용하는 것이 좋다.

 

 

 

---

 

 

 

Context API

 

리액트에 내장된 API로 전역적으로 상태를 공유할 때 사용된다. 

공식문서 : https://react.dev/learn/passing-data-deeply-with-context

 

 

Context API를 사용하는 이유

• props drilling 문제 해결 (props를 일일이 사용하지 않아도 값 공유가 가능해짐)
• 상태를 필요한 곳에서 바로 꺼내 사용 => 유지 보수가 쉬워지며 프로젝트가 커질 수록 코드가 간결해짐

=> context는 props를 전달하지 않고도 필요한 컴포넌트에서 바로 꺼내 사용할 수 있어 사용된다!

 

 

사용 방법

아래 세개는 React에서 기본으로 제공되는 내장 객체/함수들이다. 

• createContext() - 전역 상태 생성, React 내장 함수
• Provider - 전역 상태 연결, createContext로 생성된 객체의 속성
• useContext() - context 객체에서 전역 상태를 꺼내옴, React 내장 Hook

 

 

---

 

 

예시

 

평범한 카운터 기능의 코드다.

원래는 그냥 app.jsx에서 useState 불러와서 사용하는 방식이었는데

context API를 사용하기 위해서는 일단 따로 context 파일을 하나 만들어준다.

(무조건 이렇게 만들어야하는 건 아니지만 권장되는 방식이라고 한다.

src/
├── context/
 │         └── counterContext.jsx

 

 

 

counterContext.jsx

import { useContext, createContext, useState } from 'react';

// 전역 context 객체 생성
const CounterContext = createContext();

// Provider 컴포넌트
export function CounterProvider({ children }) {
  // 상태 생성
  const [Counter, setCounter] = useState(0);
  return (
    // context 객체에게 counter와 setCounter를 전달
    <counterContext.Provider value={[Counter, setCounter]}>
      // 이 Provider 안에 감싸진 컴포넌트를 의미함
      {children}
    </counterContext.Provider>
  );
}

// useCounter() : 커스텀훅
// 다른 컴포넌트에서 쉽게 useContext를 쓸 수 있게 함
export function useCounter() {
  return useContext(CounterContext);
}

 

 

• createContext()로 새 context 객체 CounterContext 생성
• CounterProvider : Context의 Provider 역할을 하는 컴포넌트
  
  • CounterContext.Provider : context를 제공하고, value로 counter, setCounter를 넣음
  • CounterContext로 {children}을 감싸 자식 컴포넌트들이 모두 context 객체에 접근 가능하도록 함
• useCounter라는 커스텀 훅을 생성
  • useContext(counterContext)로 [counter, setCounter]를 바로 사용하게 함 

 

 

Main.jsx

createRoot(document.getElementById('root')).render(
  <CounterProvider>
    <App />
  </CounterProvider>,
);

 

App을 CounterProvider로 감싸 App 내부에서 전역 상태를 사용할 수 있게 함 (App이 children 역할)

이 때 CounterProvider는 당연히 위에서 import 해야됨..

 

 

App.jsx

import './App.css';
import { useCounter } from './context/counterContext';

function App() {
  const [counter, setCounter] = useCounter();
  return (
    <>
      <div>counter:{counter}</div>
      <button
        onClick={() => {
          setCounter((prev) => prev + 1);
        }}>
        +
      </button>
      <button
        onClick={() => {
          setCounter((prev) => prev - 1);
        }}>
        -
      </button>
    </>
  );
}

export default App;

 

 

• [counter, setCounter] =useCounter => 전역적으로 관리되고 있는 상태
• useState가 아닌 커스텀 훅 useCounter를 불러와 이미 만들어져있는 상태를 공유하고 있음