Design Pattern
-
리액트 디자인 패턴 - Controlled Pattern과 UnControlled PatternReact.js & Next.js 2024. 6. 30. 13:39
목차Controlled PatternUnControlled PatternControlled PatternReact의 Controlled 패턴은 폼 요소의 상태를 React 컴포넌트의 state로 관리하는 방식입니다. 이 패턴을 사용하면 React가 폼의 데이터를 완전히 제어할 수 있게 됩니다. Controlled 패턴의 주요 특징:상태 관리:폼 요소의 값을 React의 state로 관리합니다.사용자 입력에 따라 state를 업데이트합니다.값 설정:폼 요소의 value 속성을 state 값으로 설정합니다.이벤트 핸들링:onChange 이벤트를 통해 사용자 입력을 감지하고 state를 업데이트합니다.예시 코드:import React, { useState } from 'react';function Contro..