Dachae's DevLogs

useContext React 애플리케이션에서 컴포넌트 간 데이터를 공유할 때 props drilling(깊게 전달되는 props)이 반복되면 유지보수가 어려워집니다. 이때 useContext 훅은 컴포넌트 트리 전체에 걸쳐 데이터를 쉽게 공유할 수 있는 강력한 도구가 됩니다. 이 글에서는 useContext에 대한 개념 설명은 생략하고, 실제로 프로젝트에서 어떻게 useContext를 사용하는지 A부터 Z까지 구현 중심으로 자세히 안내합니다. 1. Context 생성하기 (Create Context)먼저 context 객체를 생성합니다.// ThemeContext.jsimport { createContext } from 'react';export const ThemeContext = createCon..

useContext 리액트 앱을 만들다 보면 컴포넌트 간 상태를 공유해야 하는 경우가 많습니다. 예를 들어, 로그인 여부, 테마 설정, 다크모드, 언어 설정 등은 여러 컴포넌트가 함께 사용하는 전역 상태입니다.이럴 때 React의 Context API + useContext 훅을 사용하면 아주 깔끔하게 상태를 관리할 수 있습니다. 1. useContext란?useContext는 Context 객체의 값을 쉽게 꺼내 쓰기 위한 React 훅입니다.Context는 React에서 전역 상태를 만들 수 있도록 도와주는 기능이고, useContext는 이 Context에 저장된 값을 컴포넌트 내부에서 간단히 꺼내 쓰게 해주는 도구입니다.언제 useContext를 쓰는가? 로그인 여부 관리 : isAuthenti..