React에서의 '상태관리' 😎

안녕하세요 35기 웹 YB 최민입니다

 

오늘은 React에서 하는 상태관리에 대해서 알아보려고 합니다 !!

 

---

1. ✅상태관리란❓

상태는 컴포넌트 내부에서 관리되며 어플리케이션의 렌더에 영향을 미치는 플레인 자바스크립트 객체이다. 

 

공식문서에 따르면 이렇게 정리되어 있습니다.

 

조금 더 쉽게 풀어보자면 상태는 컴포넌트의 데이터를 저장하고 관리하는 데 사용하는 객체이고 컴포넌트의 현재 상황을 표현하며, UI가 어떻게 표시되는지를 결정하는 요소라고 할 수 있습니다 !!

 

간단히 말해서 상태는 컴포넌트가 기억하는 정보라고 할 수 있습니다.

그리고 이러한 상태를 관리하는 상태관리는 React에서 상태를 효율적으로 저장, 업데이트, 공유, 그리고 추적하는 방법을 의미합니다 💫

 

예시를 하나 들자면

내가 쇼핑몰에서 어떤 물건을 장바구니에 담고, + 버튼을 눌러 수량을 변경했을 때, 1개에서 2개로 변하는 것,
인스타그램에서 내가 누군가를 팔로우했을 때, 팔로워 수가 1이 증가하는것
➡️ 모두 상태가 변화하는 것

 

 

 

2. ✅ 상태관리가 중요한 이유는 무엇일까 ❓

웹 사이트가 커질 수록 이러한 상태들은 많아지고 이러한 상태들은 일관되어야 합니다.

 " 서로 다른 컴포넌트에서 동일한 상태를 다룬다면, 그 출처가 같아야한다" 라는 말 !!

 

일관된 데이터 흐름을 유지하려면 !

만약 상태 관리 없이 여러 곳에서 직접 데이터를 다루면 데이터 흐름이 복잡해지고 예측하기 어려워집니다.

React는 단방향 데이터 흐름을 지향하는데, 이를 유지하기 위해서는 상태의 체계적인 관리가 필수 😎

 

 

 

3. ✅ 상태의 종류

상태는 크게 로컬 상태(Local State), 전역 상태(Global State), 서버 상태(Server State) 이렇게 3개로 나눌 수 있습니다

 

• 로컬 상태 (Local State) : 컴포넌트 내부에서만 사용되며, 다른 컴포넌트와 공유되지 않는 상태 !
  useState 훅으로 간단히 관리할 수 있고, 주로 UI 요소의 동작에 사용됩니다.
  ex) 모달 창이 열리고 닫히는 상태, 입력 폼의 값 

function Modal() {
  const [isOpen, setIsOpen] = useState(false);  

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "Close" : "Open"} Modal
      </button>
      {isOpen && <div className="modal">Modal Content</div>}
    </div>
  );
}

 

 

• 전역 상태 (Global State) : 애플리케이션의 여러 컴포넌트에서 필요로 하는 상태 !
  컴포너트 간의 데이터 공유가 필요할 때 사용하고 Context API 나 상태 관리 라이브러리를 활용해서 관리합니다
  ex) 사용자 인증 정보, 로그인 상태 등

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

const AuthContext = createContext();

function AuthProvider({ children }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);  // 인증 상태 관리
  return (
    <AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
      {children}
    </AuthContext.Provider>
  );
}

function NavBar() {
  const { isAuthenticated } = useContext(AuthContext);  // 전역 상태로 접근
  return <div>{isAuthenticated ? "Welcome Back!" : "Please Log In"}</div>;
}

 

 

• 서버 상태 (Server State) : 외부 서버에서 가져온 데이터 !
  API 호출 등을 통해 데이터베이스에서 가져오며, 주로 비동기 요청으로 처리된다고 합니다
  서버 상태는 로컬 상태와 다르게 언제든 변경될 수 있기 때문에 관리가 어렵다고 해요 🥲
  ex) 상품 목록, 사용자 데이터, 날씨 정보

import { useEffect, useState } from 'react';

function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch("/api/products");  // 서버에서 데이터 요청
      const data = await response.json();
      setProducts(data);
      setLoading(false);
    }
    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

 

 

4. ✅ 상태관리 방법 💫

 

• useState: 컴포넌트 내부 상태 관리
  : useState는 가장 기본적인 React 훅으로, 간단한 상태 값을 컴포넌트 내부에서 관리할 때 유용합니다 !

const [count, setCount] = useState(0);

장점으로는 간단한 상태를 빠르게 구현할 수 있지만,

단점으로는 상태가 많아지면 코드가 복잡해지기 때문에 큰 규모의 프로젝트에는 적합하지 않다고 합니다

 

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

 

• useReducer: 복잡한 상태와 로직 분리
  : useReducer는 상태 업데이트 로직이 복잡하거나 여러 상태 값이 상호작용할 때 유용합니다 !
  
  

const [state, dispatch] = useReducer(reducer, initialState);

장점으로는 복잡한 상태 로직을 컴포넌트 외부로 분리해 관리할 수 있지만,
단점으로 코드가 길어질 수 있습니다

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

• Context API: 전역 상태 관리
  : Context API는 전역 상태 관리를 가능하게 하며, 여러 컴포넌트가 동일한 상태를 공유해야 할 때 유용합니다 !
  
  

const MyContext = React.createContext();

 

장점으로는 전역적으로 상태를 제공할 수 있는 반면,
단점으로는 상태가 많아지면 리렌더링이 빈번해져 성능 문제가 발생할 수 있다고 합니다 

const UserContext = React.createContext();

function App() {
  return (
    <UserContext.Provider value={{ name: 'John' }}>
      <UserProfile />
    </UserContext.Provider>
  );
}

function UserProfile() {
  const user = useContext(UserContext);
  return <p>User: {user.name}</p>;
}

 

 

---

 
많은 상태 관리 방법과 상태 관리 라이브러리가 있다는 것을 알게 되었습니다 !

아티클 작성 후에도 더 많은 방법들을 찾아보며 깔꼼한 상태관리를 하고 싶습니다 😋😉