child component의 form data

자식 컴포넌트에 from이 있는경우 자식 컴포넌트에서 따로 form data를 관리하려고 해보았다. 그래서 매번 setState로 form data를 관리하고 부모 컴포넌트에서 handler를 내려보내서 콜백을 하는 구조가 되었다. 그렇게 만들고 보니 세상 한심해서 부모 컴포넌트가 자식 컴포넌트가 FormData를 관리하는 구조로 만들어보았다.

컴포넌트 구조

위 그림처럼 부모 컴포넌트는 form data를 props로 갖고 있고, 자식 컴포넌트는 자신의 props를 갖고 있다.

interface FormData {
  title: string;
  isActive: boolean;
  description: string;
  date: Date;
}

interface ChildProps {
  formData: FormData;
  handler: (form: FormData) => void;
}

각각의 props는 위와 같다. 부모 컴포넌트에서 FormData와 handler를 내려보내는 구조이다.

부모 컴포넌트

코드는 아래와 같다.

function ParentComponent () {
  const [formData, setFormData] = useState();
  const setFormHandler = (form: FormData) => {
    setFormData(form);
  }
  
  return (
    <>
      <ChildComponent 
        formData={formData}
        handler={setFormHandler} />
    </>
  );
}

자식 컴포넌트

코드는 아래와 같다.

function ChildComponent(props: ChildProps) {

  const radioHandler = () => {
    ...code
  }

  return (
  <>
    <label htmlFor="active">
      <input 
        type="text" 
        name="title"
        id="title"
        onChange={(event) => {
          const value = e.target.value;
          const form = { ...props.formData, title: value };
          props.handler(form);
        }}
        placeholder="아무말" />
      </label>
      <label htmlFor="active">
      <input
        type="radio"
        id="active"
        name="active"
        value="on"
        checked={props.formData.isActive ? true : false}
        onChange={(event) => {
          const value = e.target.value;
          const form = { ...from, isActive: value };
          props.handler(form);
          radioHandler();
        }}
        />
      </label>
    </>
)}

결론

FormData는 부모 컴포넌트가 useState를 통해 관리한다. setFormData는 자식 컴포넌트에 props로 전달해주는 handler로 콜백받기 위해 setFormHandler라는 함수를 정의하고 해당 함수에서 실행한다. 그리고 자식 컴포넌트의 handler 파라메터로 넘겨준다.
자식 컴포넌트의 input에서 onChange가 일어날때마다 해당 input의 value를 FormData에 넣어주고, 부모 컴포넌트의 handler를 실행하여 FormData를 부모가 스테이트를 관리할 수 있게 해준다.

최선의 방법인지는 모르겠지만, 자식 컴포넌트가 많아질때 FormData를 관리하기 곤란할 때가 많은데, 부모가 자식들의 FormData를 관리하게 해주면 한결 상태관리가 수월해진다.