코드를 짜다보면, 중복 된 코드들이 많이 생성되는데, 중복 코드를 줄이기위해 메모

FLOCKING RULE

1. 코드들을 비교해서 가장 비슷한 부분을 찾기

2. 비슷한 코드 사이에 다른 것 찾기

3. 차이가 발생하는 부분 제거

context API(상태관리tool 아무거나)

중복되는 값들을 context API에 정의하고, context API에서는 기본적 setValue 정도만 생성하고,
컴포넌트 안에서 값을 변경하는 것을 정의하는 패턴으로,

import React, { createContext, useState } from "react";
import TextField from "./component/TextField";
import Form from "./component/Form";
import CheckboxField from "./component/CheckboxField";

export interface Info {
  name: string;
  password: string;
  confirm: boolean;
}

const defaultInfo: Info = {
  name: "",
  password: "",
  confirm: false,
};

export const InfoContext = createContext({
  value: defaultInfo,
  setValue: (v) => {},
});

function App() {
  const [info, setInfo] = useState<Info>(defaultInfo);

  const onSubmit = () => {
    if (info.confirm) {
      alert(`name: ${info.name}`);
    }
  };

  return (
    <InfoContext.Provider value={{ value: info, setValue: setInfo }}>
      <Form onSubmit={onSubmit}>
        <TextField source="name" label="이름" />
        <CheckboxField
          source="confirm"
          label="위 내용이 제출됩니다 동의하십니까?"
        />
      </Form>
    </InfoContext.Provider>
  );
}

export default App;

//form.tsx 
import React from "react";

const Form: React.FC<{
  onSubmit: () => void;
  children: React.ReactElement | React.ReactElement[];
}> = ({ onSubmit, children }) => {
  return (
    <div
      style={{
        maxWidth: 300,
        display: "flex",
        flexDirection: "column",
        gap: 4,
        alignItems: "flex-start",
      }}
    >
      {children}
      <button type={"submit"} onClick={onSubmit}>
        제출
      </button>
    </div>
  );
};

export default Form;

import React, { useContext } from "react";
import { Info, InfoContext } from "../App";

const TextField: React.FC<{
 source: keyof Info;
 label: string;
}> = ({ label, source }) => {
 const { value, setValue } = useContext(InfoContext);

 return (
   <>
     {label}
     <input
       onChange={(e) => setValue({ ...value, [source]: e.target.value })}
       value={value[source].toString()}
     />
   </>
 );
};

export default TextField;

참조
FLOCKING RULE