본문 바로가기

Context API

React에서 Context API로 전역 상태 관리하기2 Context API는 컴포넌트 트리 깊숙한 곳까지 props를 계속 전달하지 않고도 데이터를 공유할 수 있게 해주는 React 내장 기능입니다. 실무에서는 전역 테마, 인증 정보, 사용자 설정처럼 업데이트 빈도가 낮고 앱 전역에서 필요한 값에 적합합니다.1. Context가 필요한 순간다음과 같은 경우 Context 사용을 고려합니다.- 여러 레벨을 거쳐 같은 props를 전달하는 prop drilling이 발생합니다.- 전역 테마, 로케일, 인증 사용자, 기능 플래그 등 전역 의존 값이 있습니다.- 업데이트 빈도가 높지 않습니다. (입력값, 스크롤 위치처럼 자주 바뀌는 값은 Context에 넣지 않는 것이 좋습니다)반대로 다음 케이스는 다른 도구가 더 적합합니다.- 서버 상태: React Query .. 더보기
React에서 Context API로 전역 상태 관리하기 React 앱에서 여러 컴포넌트가 공통 상태를 공유해야 할 때가 많습니다. 이때 Context API를 활용하면 별도의 상태 관리 라이브러리 없이도 효율적으로 전역 상태를 관리할 수 있습니다.1. Context API 기본 개념Context는 React에서 전역 데이터를 생성하고, 하위 컴포넌트 어디서든 쉽게 접근할 수 있도록 도와줍니다. 의미 있는 이름의 Context를 생성하고, Provider를 통해 값을 전달합니다.2. 예제 코드로 이해하기import React, { createContext, useState, useContext } from 'react';// 1. Context 생성const ThemeContext = createContext();// 2. Provider 컴포넌트 생성expo.. 더보기