[ReactJS] 7장 상태관리

1. React 상태관리

React에서 상태 관리는 애플리케이션의 데이터 흐름과 UI의 일관성을 유지하는 데 중요한 역할을 합니다. 상태 관리는 사용자 인터페이스의 동적 변화를 가능하게 하고, 애플리케이션의 일관성을 유지하는 데 중요한 역할을 합니다.

 

• 특징
  • 데이터 흐름: React는 단방향 데이터 흐름을 따르며, 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 전달하며, 자식 컴포넌트는 props를 통해 받은 데이터를 기반으로 UI를 렌더링
  • 상태의 불변성: 상태는 직접 수정하지 않고, 항상 새로운 상태 객체를 반환하여 업데이트함, 이는 React의 리렌더링과 최적화에 기여 
  • 훅(Hooks): React 16.8버전부터 도입된 훅을 통해 함수형 컴포넌트에서도 상태 관리를 할 수 있게됨

---

2. 상태관리의 장점

• 컴포넌트 기반 구조: React의 컴포넌트 기반 구조 덕분에 상태를 각 컴포넌트에 캡슐화할 수 있어 코드의 재사용성과 유지보수성이 향상
• 효율적인 리렌더링: 변경된 상태만 리렌더링하여 성능을 최적화
• 상태 공유 용이: Context API나 상태 관리 라이브러리를 사용하면 여러 컴포넌트 간 상태를 쉽게 공유 
• 디버깅 용이: 상태 관리 라이브러리(예:Redux)의 경우, 상태의 변화를 추적할 수 있는 도구를 제공하여 디버깅을 쉽게함

---

3.상태관리 예제

• 로컬 상태 관리 예제

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    // 카운트가 0보다 클 때만 감소
    if (count > 0) {
      setCount(count - 1);
    }
  };

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

export default LocalState;

• Context API를 활용한 전역 상태 관리

// ThemeContext.js
import React, { createContext, useContext, useState } from 'react';

// Context 생성
const ThemeContext = createContext();

// Provider 컴포넌트
export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// Context 사용을 위한 훅
export const useTheme = () => {
  return useContext(ThemeContext);
};

// ThemeComponent.js 
import React from 'react';
import { useTheme } from './ThemeContext';

const ThemedComponent = () => {
  const { theme, setTheme } = useTheme();

  return (
    <div
      style={{
        background: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#000' : '#fff',
      }}
    >
      <h1>Current Theme: {theme}</h1>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </div>
  );
};

export default ThemedComponent;

// App.js 
import { ThemeProvider } from './6.State/ThemeContext';
import ThemedComponent from './6.State/ThemeComponent';
import './App.css';
import React from 'react';

const ReactApp = () => {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
};

export default ReactApp;

• ThemeContext.js: Context를 생성하고, Provider를 통해 상태를 관리, useTheme훅을 만들어서 다른 컴포넌트에서 쉽게 사용할 수 있도록 함
• ThmedComponent.js: useTheme훅을 사용하여 현재 테마를 가져오고, 버튼 클릭 시 테마를 토글함
• App.js: ThemeProvider로 애플리케이션을 감싸서 전역 상태를 사용할 수 있음

---

GitHub - Koras02/react-bloging: https://thinky.tistory.com/category/Front-End/ReactJS