파일전송 오류 해결 법은 파일 state를 따로 써준다. 하지만 뭔가 잘못된것 같다.

전송은 되고 있다. 하지만 이러한 메세지를 주고 있다.

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

리액트 페이지:

Controlling an input with a state variable
An input like <|input /> is uncontrolled. Even if you pass an initial value like <ㅣinput defaultValue="Initial text" />, your JSX only specifies the initial value. It does not control what the value should be right now.

To render a controlled input, pass the value prop to it (or checked for checkboxes and radios). React will force the input to always have the value you passed. Usually, you would do this by declaring a state variable:

function Form() {
  const [firstName, setFirstName] = useState(''); // Declare a state variable...
  // ...
  return (
    <input
      value={firstName} // ...force the input's value to match the state variable...
      onChange={e => setFirstName(e.target.value)} // ... and update the state variable on any edits!
    />
  );
}

이 말은 즉슨 리액트에서 컨트롤되는 컴포넌트는 리액트 그리고 주로 value라는 props로 초기화 되어있는 컴포넌트를 말한다.

---

이슈의 해결 : form을 화면에 그리는 map 랜더링 부분과 formFieldArray의 객체 부분에서 input의 type으로 file이 있는거였는데 switch문에서 file이라는 태그가 따로 있으면 바꾸어주는것으로 착각하여 써버렸다. 객체 안의 tag: "file"로 고쳐주니깐 오류는 사라졌다.

const formFieldArray = [
  { type: "text", name: "title", placeholder: "Title", tag: "input" },
  { type: "date", name: "date", placeholder: "Date", tag: "input" },
  {
    name: "category",
    placeholder: "Category",
    tag: "select",
    options: [
      { value: "category", title: "category" },
      { value: "study", title: "study" },
      { value: "work", title: "work" },
      { value: "diary", title: "diary" },
    ],
  },
  { name: "todo", placeholder: "To do", tag: "textarea" },
  { type: "file", name: "file", tag: "file" },
];

  <form onSubmit={handleSubmit} className="form">
            {formFieldArray.map((field) => {
              switch (field?.tag) {
                case "input":
                  return (
                    <React.Fragment key={field.name}>
                      <input
                        type={field?.type}
                        name={field?.name}
                        placeholder={field?.placeholder}
                        value={todo?.[field?.name]}
                        onChange={handleChange}
                      />
                      {Object.values(error).some((value) => value) && (
                        <p key={`${field.name}-error`} style={{ color: "red" }}>
                          {error[field.name]}
                        </p>
                      )}
                    </React.Fragment>
                  );
                case "textarea":
                  return (
                    <React.Fragment key={field.name}>
                      <textarea
                        value={todo?.[field?.name]}
                        name={field?.name}
                        placeholder={field?.placeholder}
                        onChange={handleChange}
                      />
                      {toDoerror && (
                        <p key={`${field.name}-error`}>{toDoerror}</p>
                      )}
                      {Object.values(error).some((value) => value) && (
                        <p key={`${field.name}-error`} style={{ color: "red" }}>
                          {error[field.name]}
                        </p>
                      )}
                    </React.Fragment>
                  );
                case "file":
                  return (
                    <React.Fragment key={field.name}>
                      <input
                        type={field?.type}
                        name={field?.name}
                        onChange={handleChange}
                      />
                      {Object.values(error).some((value) => value) && (
                        <p key={`${field.name}-error`} style={{ color: "red" }}>
                          {error[field.name]}
                        </p>
                      )}
                    </React.Fragment>
                  );
                case "select":
                  return (
                    <React.Fragment key={field.name}>
                      <select
                        name={field?.name}
                        value={todo?.[field?.name]}
                        onChange={handleChange}
                      >
                        {field?.options?.map((option) => {
                          return (
                            <option key={option.title} value={option.value}>
                              {option.title}
                            </option>
                          );
                        })}
                      </select>
                      {categoryError && (
                        <p key={`${field.name}-error`}>{categoryError}</p>
                      )}
                      {Object.values(error).some((value) => value) && (
                        <p key={`${field.name}-error`} style={{ color: "red" }}>
                          {error[field.name]}
                        </p>
                      )}
                    </React.Fragment>
                  );
                default:
                  return null;
              }
            })}