속성 제어 패턴 (Control Props Pattern) | 리액트 디자인 패턴

속성 제어 패턴 (Control Props Pattern) 이란?

컴포넌트를 제어 컴포넌트(Controlled Component)로 변환한다. 외부 상태는 사용자가 컴포넌트의 기본 동작을 변경할 수 있도록 사용자 지정 로직 삽입을 허용하는 SSOT(Single Source Of Truth)로 사용된다.

• 컴포넌트를 제어 컴포넌트 란? component 의 상태를 제어할 수 있는 컴포넌트를 의미한다.
• SSOT 란, 정보와 스키마를 오직 하나의 출처에서만 생성 또는 편집하도록 하는 방법론입니다.

장점

더 많은 제어권을 부여

메인 state 가 컴포넌트 밖으로 드러나기 때문에 사용자는 직접적으로 그 컴포넌트를 제어할 수 있다.

// app.jsx
import "./styles.css";
import input from "./input";
import React, { useState } from "react";

export default function App() {
  const [text, setText] = useState("");

  const handleChange = (event) => {
    setText(event.target.value);
  };

  const handleSubmit = (event) => {
    alert("A name was submitted: " + text);
    event.preventDefault();
  };

  return (
    <div className="App">
      <input
        value={text}
        handleSubmit={handleSubmit}
        handleChange={handleChange}
      />
    </div>
  );
}

// input.jsx
import React from "react";

const input = ({ text, handleSubmit, handleChange }) => {
  return (
    <>
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" value={text} onChange={handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    </>
  );
};

export default input;

컴포넌트의 유연성이 증가한다

이전에는 한곳(JSX)에서 구현하는 것으로 컴포넌트 동작이 가능했지만 이제는 3개의 다른 위치 (JSX/useState/handleChange)에서 구현이 필요하다.

---

리액트 디자인 패턴 (React Design Pattern)

• 여러 경우에 적용할 수 있는 재 사용 가능한 컴포넌트를 만들 수 있는지
• 사용하기 쉽고 편리한 API 를 제공하는 컴포넌트를 만들 수 있는지
• UI 기능성의 측면에서 확장 가능한 컴포넌트를 만들 수 있을지