React Form

<form action={search}>
  <input name="query" />
  <button type="submit">Search</button>
</form>

action의 props에는 URL, 함수가 들어갈 수 있다.

• URL : form은 HTML 폼 컴포넌트처럼 동작한다.
• 함수 : 해당 함수는 form 제출을 처리한다. formData가 함수의 인수로 전달되어 폼에서 전달된 데이터에 접근할 수 있다.

➕ formData란?
form필드와 key, value를 생성하는 방법을 제공한다.

- FormData.append(): FormData 객체안에 이미 키가 존재하면 그 키에 새로운 값을 추가하고, 키가 없으면 추가합니다.
- FormData.delete() : FormData 객체로부터 키/밸류 쌍을 삭제합니다.
- FormData.entries() : 이 객체에 담긴 모든 키/밸류 쌍을 순회할 수 있는 iterator를 반환합니다.
- FormData.get() : FormData 객체 내의 값들 중 주어진 키와 연관된 첫번째 값을 반환합니다.
- FormData.getAll() : FormData 객체 내의 값들 중 주어진 키와 연관된 모든 값이 담긴 배열을 반환합니다.
- FormData.has() : FormData 객체에 특정 키가 포함되어 있는지 여부를 나타내는 boolean 을 반환합니다.
- FormData.keys()  : 이 객체에 담긴 모든 키/벨류 쌍들의 모든 키들을 순회 할 수 있는 iterator를 반환합니다.
- FormData.set() : FormData 객체 내에 있는 기존 키에 새 값을 설정하거나, 존재하지 않을 경우 키/밸류 쌍을 추가합니다.
- FormData.values() : 이 객체에 포함된 모든 밸류를 통과하는 iterator 를 반환합니다.

➕ useFormStatus Hook
form이 제출되는 동안 pending상태를 보여줄 수 있다.
-> 마지막 폼 제출의 상태 정보를 제공하는 hook이다.

const { pending, data, method, action } = useFormStatus();

• pending: 불리언 값으로, true라면 form이 아직 제출중인 것을 의미
• data : formData가 제출하는 데이터를 포함한다. 활성화된 제출이 없거나 상위에 form 이 없는 경우에는 null이다.
• method : GET,POST HTTP메서드를 사용하여 제출되는지를 나타낸다.
• action : 상위 form의 action prop에 전달한 함수의 레퍼런스. 상위 form이 없는 경우에는 null이다. prop에 URI값이 제공되었거나 action prop를 지정하지 않았을 경우에는 status.action 은 null이다.

➕ useOptimistic Hook
네트워크 요청과 같은 백그라운드 작업이 끝나기 전에 사용자 인터페이스에 데이터를 업데이트 하는 방법이다.
-> 속도와 반응성이 뛰어나다는 인상을 준다.

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

import { useOptimistic } from 'react';

function AppContainer() {
  const [optimisticState, addOptimistic] = useOptimistic(
    state,
    // updateFn
    (currentState, optimisticValue) => {
      // merge and return new state
      // with optimistic value
    }
  );
}

• state : 작업이 대기중이지 않을 때 초기에 반환될 값이다.

• updateFn(currentState, optimisticValue): 결과적인 낙관적인 상태를 반환한다. 순수 함수여야 하며, 두 매개변수는 병합된 값이다.

• optimisticState : 작업이 대기 중이지 않을 때는 state와 동일하며, 그렇지 않은 경우에는 updateFn에서 반환된 값과 동일하다.

• addOptimistic : 낙관적인 업데이트가 있을 때 호출하는 dispatch함수이다. optimisticValue라는 하나의 인자를 취하며, state와 optimisticValue로 updateFn을 호출한다.

➕ formAction
form내부에 각 버튼은 formAction 프로퍼티를 설정하여 고유한 동작을 할수 있다.

export default function Search() {
  function publish(formData) {
    ...
  }

  function save(formData) {
    ...
  }

  return (
    <form action={publish}>
      <textarea name="content" rows={4} cols={40} />
      <br />
      <button type="submit" name="button" value="submit">
        Publish
      </button>
      <button formAction={save}>Save draft</button>
    </form>
  );
}