[React] 컨텍스트 (Context)

React에서 props만으로 데이터를 전달할 때 불편한 점이 많습니다.부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하려면,중간 단계에 있는 모든 컴포넌트가 불필요하게 props를 받아야 하는 문제가 발생합니다. 이 문제를 해결하기 위해 React는 Context API라는 기능을 제공합니다.이 글에서는 Context의 개념부터 사용법, 최적화 방법까지 하나씩 알아보겠습니다.01Context가 필요한 이유1. Props의 단점: Props DrillingReact에서 컴포넌트 간 데이터를 전달할 때 보통 props를 사용합니다.하지만 부모 → 자식 → 손자로 props를 계속 전달해야 하는 경우,중간 단계의 컴포넌트들이 불필요한 props를 받아야 하는 문제가 발생합니다.이러한 현상을 Props Dri..

• format_list_bulleted DEVELOPMENT/React.js
• · 2025. 2. 10.
• textsms

유저 상태를 Provider로 비비고, Context로 비비자!

React의 Context API를 활용하면 전역 상태를 간단하고 효율적으로 관리할 수 있습니다.이 글에서는 Context와 Provider의 기본 개념부터, 로그인 상태를 관리하는 방법까지 하나씩 정리해 보겠습니다! 01Context와 ProviderReact의 Context API에는 전역 상태를 관리하기 위한 두 가지 주요 도구가 있습니다: Context와 Provider입니다.1. Context 란?Context는 데이터를 저장하는 "저장소" 역할을 합니다.React에서 전역 상태를 관리할 때 데이터를 담는 "그릇"처럼 사용됩니다.import { createContext, useContext } from "react";// Context 생성export const AuthContext = crea..

• format_list_bulleted DEVELOPMENT/PROJECT NOTES
• · 2024. 12. 26.
• textsms