728x90 300x250 SMALL 분류 전체보기1115 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. 제어 컴포넌트 vs 비제어 컴포넌트 제어 컴포넌트(React가 값 관리)function App() { const [text, setText] = useState(""); const handleChange = (e) => setText(e.target.value); return ;}React 상태(text)가 값을 완전히 제어사용자가 입력할 때마다 상태가 업데이트되어야만 값이 변경됨비제어 컴포넌트(DOM이 값 관리):function App() { return ;}입력값은 DOM에서만 관리되며 React는 관여하지 않음사용자가 값을 자유롭게 입력 가능 제어 컴포넌트비제어 컴포넌트데이터 관리리액트 state로 데이터 관리DOM에서 직접 데이터 관리유효성 검사쉽게 구현 가능추가 코드 작성 필요코드 복잡성복잡할 수 있음간단한 폼에 적합특수.. 2025. 2. 1. 이전 1 2 3 4 5 ··· 279 다음 728x90 반응형 LIST