728x90 300x250 SMALL Front-end/React91 React에서 하위 컴포넌트 간 상태 공유하는 방법 하위 컴포넌트에서 State 공유하기하위 컴포넌트에서 부모 컴포넌트의 상태를 공유하거나, 상위 컴포넌트와 상태를 주고받는 경우에는 상태를 위로 끌어올리거나(Lifting State Up) Context API와 같은 방법을 사용해 상태를 관리할 수 있다.1. 상태를 부모 컴포넌트로 올려서 공유하기(Lifting State Up)React에서 Lifting State Up(상태 끌어올리기)은 부모 컴포넌트에서 상태를 관리하고, 그 상태를 하위 컴포넌트에 props로 전달하는 방법이다.예시 : 상위 컴포넌트에서 하위 컴포넌트로 상태 전달하기// 부모 컴포넌트 (Parent)import React, { useState } from 'react';function Parent() { // 부모 컴포넌트에서 상태.. 2025. 2. 9. Redux 완벽 가이드 : 개념, 사용법, 예제코드 Redux의 개념Redux는 React애플리케이션에서 상태(state)를 중앙에서 관리하는 전역 상태 관리를 위한 JavaScript 라이브러리이다.상태를 한 곳에서 관리하면 여러 컴포넌트가 같은 데이터를 쉽게 공유할 수 있다. 기본 개념Store : 상태가 저장되는 곳이다. 하나의 애플리케이션에 하나의 Store가 존재 한다.Action : 상태에 변화를 일으키는 '이벤트'를 위미한다. 예: 버튼 클릭, 데이터 요청 등Reducer: 상태를 업데이트 하는 함수이다. Action을 받아서 새로운 상태를 반환한다.Dispatch: Action을 Store에 전달하는 방법이다Redux의 기본 흐름(두 가지 방식)Redux에서 액션을 사용하여 상태를 업데이트하는 방법에는 두 가지 방식이 있다.직접 객체로 di.. 2025. 2. 8. Context API 상태 관리 : 쉽게 이해 하기 Context API란?React에서 컴포넌트 간 상태를 공유할 때 가장 일반적인 방법은 props를 사용하는 것이다. 하지만 컴포넌트 구조가 깊어지면 Props Drilling(중첩된 컴포넌트에 계속해서 props를 전달하는 문제)이 발생할 수 있다.이를 해결하기 위해 Context API를 사용하면, 부모 → 자식 → 손자 컴포넌트로 직접 props를 전달하지 않고 전역으로 상태를 공유할 수 있다.Context API의 역할공통 상태를 한 곳에 저장Provider를 통해 트리 구조의 모든 컴포넌트에 데이터 제공데이터가 필요한 하위 컴포넌트에서 useContext를 통해 쉽게 접근Context API의 핵심 개념Context 생성 : createContext()를 사용해 컨텍스트를 만든다.Provide.. 2025. 2. 7. 전역 상태 관리 필수 개념과 React에서 최적 솔루션 전역 상태 관리 라이브러리 비교React에서는 상태(state)를 관리하는 다양한 방법이 있다. 프로젝트 규모나 복잡도에 따라 적절한 방법을 선택하는 것이 중요하다.전역 상태 관리 라이브러리가 필요한 이유여러 컴포넌트에서 같은 데이터를 공유해야 할 때props를 계속 전달하는 Props Drilling 문제 해결상태 변경이 많아 관리가 복잡할 때1. Context API(기본 제공)특징React에서 기본 제공하는 전역 상태 관리 기능createContext()와 useContext()를 활용하여 간단하게 사용 가능간단한 상태 관리에는 충분하지만, 상태 업데이트가 잦으면 성능 문제 발생 가능언제 사용할까?소규모 프로젝트상태 변경이 자주일어나지 않는 경우const ThemeContext = createCon.. 2025. 2. 6. 이전 1 2 3 4 ··· 23 다음 728x90 반응형 LIST