728x90 300x250 SMALL 리액트11 Redux 완벽 가이드 : 개념, 사용법, 예제코드 Redux의 개념Redux는 React애플리케이션에서 상태(state)를 중앙에서 관리하는 전역 상태 관리를 위한 JavaScript 라이브러리이다.상태를 한 곳에서 관리하면 여러 컴포넌트가 같은 데이터를 쉽게 공유할 수 있다. 기본 개념Store : 상태가 저장되는 곳이다. 하나의 애플리케이션에 하나의 Store가 존재 한다.Action : 상태에 변화를 일으키는 '이벤트'를 위미한다. 예: 버튼 클릭, 데이터 요청 등Reducer: 상태를 업데이트 하는 함수이다. Action을 받아서 새로운 상태를 반환한다.Dispatch: Action을 Store에 전달하는 방법이다Redux의 기본 흐름(두 가지 방식)Redux에서 액션을 사용하여 상태를 업데이트하는 방법에는 두 가지 방식이 있다.직접 객체로 di.. 2025. 2. 8. Props Drilling 문제란? Props Drilling 문제란?React에서 부모 컴포넌트의 상태(state)를 자식 → 손자 → 증손자 컴포넌트로 계속 props를 통해 전달해야 하는 문제를 Props Drilling이라고 한다.즉, 상태를 직접 사용하지 않은 중간 컴포넌트도 불필요하게 props를 전달해야 하는 비효율적인 상황이 발생한다.Props Drilling 문제 예제문제 상황 : 중간 컴포넌트까지 필요 없이 props를 전달 해야 함import React, { useState } from "react";// 부모 컴포넌트 (최상단에서 상태를 관리)const Parent = () => { const [count, setCount] = useState(0); return ( 부모.. 2025. 2. 4. React의 제어 컴포넌트란? React의 제어 컴포넌트란?입력필드의 값을 React의 상태(state)로 완전히 제어하는 컴포넌트를 말한다. 입력값은 DOM이 아니라 React 상태를 통해 관리되며, 상태가 value 속성으로 입력 필드에 전달된다. 동작 원리React에서 의 value는 React 상태에 의해 결정된다.React는 매 렌더링마다 value 속성을 DOM에 전달하여 DOM의 값을 덮어쓴다.사용자가 입력을 변경하더라도 React는 상태를 업데이트하지 않으면, 렌더링 후 값은 여전히 상태에 정의된 값으로 유지된다.function App() { const [text, setText] = React.useState("안녕하세요"); return ;} 이 경우, value 속성은 항상 text 상태의 값("안녕하세요")으.. 2025. 1. 31. React useState로 다중 입력 폼 : onChange 핸들러 활용 리액트에서 하나의 컴포넌트 안에 여러 개의 입력 필드를 다루는 방법은 제어 컴포넌트(Control Components)와 상태(State)를 사용하는 것이다. 각각의 입력 필드 값을 독립적으로 관리하면서 하나의 onChange이벤트 핸들러를 통해 처리할 수 있다. 사용예제import React, { useState } from 'react';function MultiInputForm() { // 상태를 객체 형태로 관리 const [formData, setFormData] = useState({ username: '', email: '', password: '' }); // 입력값 변경 시 호출되는 함수 (공통 핸들러) const handleChange = (e) => { .. 2025. 1. 28. 이전 1 2 3 다음 728x90 반응형 LIST