
[React] Control Props 패턴 : Controlled vs Uncontrolled
·
Library & Runtime/React
🔍 Control Props 패턴이란?이전 글에서 Compound Component 패턴에 대해 알아봤다.컴파운드 컴포넌트 패턴은 부모와 자식 컴포넌트가 자연스럽게 협력하는 구조를 만들기 위한 패턴이었다. Control Props 패턴은 컴포넌트가 자체 상태를 가질 수도 있고, 부모가 상태를 제어할 수도 있게 만드는 패턴이다.input, select, modal, toggle 등 상태를 외부에서 완전히 제어할 수 있게 해야 하는 컴포넌트에서 사용된다. 🧩 예제 코드이전 글에서 활용한 예제 코드를 수정하여 실습해 보자.Toggle.tsximport { createContext, useContext, useState, ReactNode } from 'react';type ToggleContextType ..