728x90 300x250 SMALL 자바스크립트18 Redux 완벽 가이드 : 개념, 사용법, 예제코드 Redux의 개념Redux는 React애플리케이션에서 상태(state)를 중앙에서 관리하는 전역 상태 관리를 위한 JavaScript 라이브러리이다.상태를 한 곳에서 관리하면 여러 컴포넌트가 같은 데이터를 쉽게 공유할 수 있다. 기본 개념Store : 상태가 저장되는 곳이다. 하나의 애플리케이션에 하나의 Store가 존재 한다.Action : 상태에 변화를 일으키는 '이벤트'를 위미한다. 예: 버튼 클릭, 데이터 요청 등Reducer: 상태를 업데이트 하는 함수이다. Action을 받아서 새로운 상태를 반환한다.Dispatch: Action을 Store에 전달하는 방법이다Redux의 기본 흐름(두 가지 방식)Redux에서 액션을 사용하여 상태를 업데이트하는 방법에는 두 가지 방식이 있다.직접 객체로 di.. 2025. 2. 8. 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. 객체/배열 디스트럭처링 시 기본값 설정하기 디스트럭처링을 할 때, 값이 존재하지 않으면 기본값을 설정할 수 있다.이 경우, 변수에 기본값을 지정하면 해당 값이 없을 때 대신 사용된다. 객체 디폴트 값const person = { name: "Alice" };// age가 없으면 30을 기본값으로 설정const { name, age = 30 } = person;console.log(name); // "Alice"console.log(age); // 30 (기본값) 배열 디폴트 값const numbers = [1];// 두 번째 값이 없으면 2를 기본값으로 설정const [first, second = 2] = numbers;console.log(first); // 1console.log(second); // 2 2025. 1. 26. 객체와 배열을 쉽게 다루는 법! 디스트럭처링 핵심 정리 디스트럭처링(Destructuring)디스트럭처링은 자바스크립트에서 배열이나 객체의 값을 추출해서 변수에 쉽게 할당하는 문법이다. 디스트럭처링을 사용하면 배열이나 객체에서 특정 값들을 간결하고 직관적으로 추출할 수 있어서 코드가 깔끔학 이해하기 쉬워진다. 1. 객체 디스트럭처링객체 디스트럭처링은 객체에서 원하는 속성 값을 변수로 추출하는 방법이다.객체에서 속성을 추출하여 변수 이름을 동일하게 지정하거나, 새로운 이름을 붙여서 변수에 할당할 수 있다. 기본 사용법const person = { name: "Alice", age: 25, city: "Seoul"};// 객체에서 name, age 값을 추출하여 변수로 할당const { name, age } = person;console.log(name);.. 2025. 1. 25. 이전 1 2 3 4 5 다음 728x90 반응형 LIST