728x90 300x250 SMALL useState5 React에서 컴포넌트 간 데이터 공유하기 - Shared State 1. Shared State란?React에서는 여러 개의 컴포넌트가 같은 데이터를 필요로 하는 경우가 많다. 이 때 공유된 상태(Shared State)가 필요하다. 예를 들어, 쇼핑몰 웹사이트에서장바구니 개수를 헤더와 상품 목록에서 동시에 표시해야 한다면?로그인 상태를 여러 페이지에서 유지하려면?다크모드/라이트모드 설정을 모든 컴포넌트에 적용하려면?이런 경우, 각각의 컴포넌트가 공통 상태(Shared State)를 가져야 한다. 2. Shared State를관리하는 방법React에서 상태를 공유하는 방법은 크게 3가지가 있다. 1) Props를 이용한 상태 공유(기본적인 방법)부모 컴포넌트에서 자식 컴포넌트로 데이터를 내려보내는 방식import React, { useState } from "react".. 2025. 2. 5. React에서 useState를 활용한 간단한 회원가입 폼 만들기 이번에는 useState를 활용하여 이름과 성별을 입력받고, 제출 버튼을 누르면 입력된 값을 출력하는 간단한 회원가입 폼을 만들어보자 1. React에서 useState란?useState는 함수형 컴포넌트에서 상태를 관리할 수 있도록 도와주는 React의 훅이다. 이 훅을 사용하면 입력값을 저장하고 변경할 수 있다. 2. 회원가입 폼 만들기아래는 이름과 성별을 입력받는 폼을 구현한 코드이다.import React, { useState } from "react";const RegisterForm = () => { const [userName, setUserName] = useState(""); const [userGender, setUserGender] = useState("남성"); c.. 2025. 2. 3. React에서 체크박스를 포함한 다중 입력 폼 구현하기 예제 코드import React, { useState } from "react";function MultiInputForm() { // 초기 상태 설정 const [formData, setFormData] = useState({ username: "", email: "", agreeToTerms: false, // 체크박스 상태 }); // 입력 값 변경 핸들러 const handleChange = (e) => { const { name, value, type, checked } = e.target; // e.target에서 필요한 값 추출 setFormData({ ...formData, // 기존 값 복사 [name]: type === "checkb.. 2025. 1. 29. 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 다음 728x90 반응형 LIST