728x90 300x250 SMALL Front-end/React115 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. 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에서 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. 비제어 컴포넌트란? 베제어 컴포넌트(Uncontrolled Component)는 HTML 폼 요소 자체를 리액트의 관리 없이 사용하는 방식을 의미한다. 이것은 HTML폼 요소의 기본 동작을 그대로 사용하는 방식이다. 따라서 HTML폼을 그대로 사용하지만, 리액트 상태 관리와는 분리된 방식으로 동작한다.필요할 때 ref를 사용하여 값에 접근한다.특징 DOM을 직접 참조 : 입력 값을 상태로 관리하지 않고, DOM에서 ref를 통해 값에 접근한다.HTML기본 동작 유지 : 폼 데이터는 사용자가 입력한 값으로 DOM에 저장되며, 리액트는 이를 제어하지 않는다.간단한 구현 : 입력 데이터가 리액트 상태와 동기화되지 않기 때문에 코드가 간단해질 수 있다.유효성 검사 등 동적 처리에 제약 : 입력 데이터에 기반한 동적 처리를 하려면 .. 2025. 2. 2. 이전 1 ··· 5 6 7 8 9 10 11 ··· 29 다음 728x90 반응형 LIST