DOTI Project

React 앱을 개발하다 보면 여러 컴포넌트가 같은 상태를 필요로 하는 경우가 있습니다. 이럴 때마다 props로 전달하는 건 번거롭고 복잡해지죠. Context API는 이런 문제를 해결하기 위해 전역 상태를 공유할 수 있는 방법을 제공합니다.1. Context API란?Context API는 컴포넌트 트리 전체에 데이터를 전달할 수 있는 기능을 제공합니다. Provider와 Consumer 개념을 통해 상태를 공유할 수 있습니다.2. Context 생성 및 Provider 정의// ThemeContext.tsximport { createContext, useContext, useState } from 'react';type Theme = 'light' | 'dark';const ThemeContext..

React는 기본적으로 단방향 데이터 흐름을 따릅니다. 하지만 여러 컴포넌트에서 동일한 데이터를 사용해야 할 경우 Context API를 사용하면 매우 유용합니다.1. Context API란?Context는 props를 거치지 않고도 하위 컴포넌트에 데이터를 전달할 수 있게 해주는 기능입니다. 예를 들어, 다국어 설정, 테마, 로그인 정보 등에 자주 사용됩니다.2. 기본 사용법// 1. Context 생성import { createContext } from 'react';export const ThemeContext = createContext('light');// 2. Provider로 감싸기import { ThemeContext } from './ThemeContext';function App() {..

React 애플리케이션이 커지면서 컴포넌트 간에 데이터를 전달하기 어려워지는 경우가 많습니다. 이때 Context API를 사용하면 전역 데이터를 간단하게 관리할 수 있습니다.1. props drilling 문제란?상위 컴포넌트의 데이터를 하위로 계속 전달해야 하는 상황을 props drilling이라고 합니다. 예: 이런 구조는 관리가 어렵고, 중간 컴포넌트는 실제로 데이터를 사용하지 않더라도 전달해야 합니다.2. Context API 기본 사용법1) Context 생성import { createContext } from 'react';export const UserContext = createContext(null);2) Provider로 감싸기import { UserC..

복잡한 상태 관리를 하려면 단순한 useState만으로는 한계가 있습니다. 이럴 때 useReducer와 Context API를 결합하면 유지보수가 쉽고 구조화된 전역 상태 관리가 가능합니다.1. 왜 useReducer + Context인가?useReducer는 상태 업데이트 로직을 하나의 함수로 관리할 수 있어 복잡한 상태 전이에 적합합니다. Context API는 이 상태를 전역으로 공유할 수 있게 해줍니다. 이 둘을 결합하면 리덕스 없이도 유사한 전역 상태 관리를 구현할 수 있습니다.2. 기본 구조 설계// state.jsimport { createContext, useReducer, useContext } from 'react';const initialState = { count: 0 };func..

React 앱이 커지면서 여러 컴포넌트 간에 상태를 공유해야 할 경우가 많아집니다. 이때 props drilling 문제를 피하고 전역 상태를 효율적으로 관리할 수 있도록 돕는 도구가 바로 Context API입니다.1. Context API란?Context API는 React에서 전역적으로 데이터를 공유할 수 있도록 도와주는 기능입니다. 부모-자식 관계를 타고 props를 전달하지 않고도 상태를 공유할 수 있습니다.2. 사용 예제// 1. Context 생성const ThemeContext = React.createContext();// 2. Provider로 상태 공유function App() { const [theme, setTheme] = useState('light'); return ( ..