React 내부 구현 상태관리

React 내부에서 상태를 관리하는 방법

1. useState

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

1. Context API

const CountContext = createContext();

function CountProvider({ children, initialCount = 0 }) {
  const [count, setCount] = useState(initialCount);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = useContext(CountContext);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

1. Redux

import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';

const initialState = { count: 0 };

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

const store = createStore(reducer);

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

Constext API란?

React에서 컴포넌트 트리 전체에 전역적인 데이터를 쉽게 전달하기 위해 사용하는 방법입니다.
Constext API를 사용하면 props를 중첩된 컴포넌트에 일일이 전달하지 않고도 데이터나 상태를 컴포넌트 트리의 깊숙한 자손에게 전달이 가능합니다.

Constext API 사용법

1. Context 생성: createContext 함수를 사용하여 Context 객체를 생성합니다.

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

const CountContext = createContext();

1. Provider 정의: Provider 컴포넌트를 정의합니다, Provider 컴포넌트는 prop을 통해 하위 컴포넌트에 전달할 데이터를 설정합니다.

function CountProvider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

1. Context값 사용: useContext 훅을 상용하여 Context 값을 사용합니다.

function Counter() {
  const { count, setCount } = useContext(CountContext);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Provider로 감싸기: Provider 컴포넌트를 사용하여 Context값을 하위 컴포넌트에 전달합니다.

function App() {
  return (
    <CountProvider>
      <Counter />
    </CountProvider>
  );
}

export default App;

React 외부 구현 상태관리

React 외부에서 상태를 관리하는 방법

React 애플리케이션에서 상태 관리를 위해 외부 라이브러리를 사용해야 합니다.
바로 Redux 입니다.
Redux는 가장 널리 사용되는 상태 관리 라이브러리 중 하나입니다.
예측 가능한 상태 관리 패턴을 제공합니다.

Redux & Redux Toolkit이란?

Redux는 중앙 집중식 상태 관리 라이브러리로, 상태, 액션, 리듀서, 미들웨어를 사용하여 상태를 관리합니다.
Redux Toolkit은 Redux 애플리케이션 개발을 간편하게 해주는 도구 모음입니다. configureStore, createSlice, createAsyncThunk 등의 기능을 통해 코드의 복잡성을 줄이고 상태 관리와 비동기 작업을 효율적으로 처리할 수 있게 도와줍니다.

Redux & Redux Toolkit 사용법

슬라이스생성: createSlice를 사용하여 상태와 리듀서를 정의합니다.

            `initialState`와 `reducers`를 설정합니다.

스토어 설정: configureStore를 사용하여 스토어를 생성하고 슬라이스 리듀서를 스토어 에 추가합니다.

Provider로 스토어 제공: Provider를 사용하여 애플리케이션 전체에 스토어를 제공합니다.

컴포넌트에서 상태 사용: useSelector를 사용하여 상태를 읽고, useDispatch를 사용하여 액션을 디스패치합니다.