Modern Forms in React — Erik Rasmussen - hochan222/Everything-in-JavaScript GitHub Wiki

동영상 보기

input에 대한 props가 있으면 리액트 개발자가 변경하기전까지 변경이 되지 않는다. DOM에게 권한이 없다.

React에서 가장 간단한 form을 사용하는 형태는 다음과 같다.

const MyComponent = () => {
  const [value, setValue] = React.useState()
  return (
    <input
      name="city"
      value={value}
      onChange={event => setValue(event.target.value)}
    />
  )
}

이 코드에는 버그가 있다.
놀랍게도 처음 랜더링 될 때 useState 초기값이 정의되지 않아, uncontrolled input이 된다. (와우.. 문화충격)
Dev도구에서 React는 이 입력이 uncontrolled input에서 controlled input으로 변해 버그가 일어날 것이다.
따라서 초기값을 다음과 같이 설정해주자.

const [value, setValue] = React.useState('')

What is form state?

  • FORM STATE
    • FIELD VALUES
      • FORM 양식에 필요한 변수들이다!
    • VALID/ INVALID
      • 유효성 검사가 있는지 여부 (양식이 유효한지 유효하지 않은지)
    • DIRTY / PRISTINE
      • 전체 양식이 깔끔 할 수도 있고 수정되지 않은 경우 서버로 다시 보내지 않을 수도 있다.
    • VALIDATION ERRORS
      • 유효성 검사 오류가 날 경우 양식 전체에 영향을 미치는지 부분적으로 영향을 미치는지.
    • ACTIVE
      • 사용자에게 도움이되는 도구 설명을 표시하려면 현재 활성화된 필드를 알아야 할 수도 있다.
    • VISITED / TOUCHED
      • foucus 여부에 따른 오류 메세지 표시
    • MODIFIED
      • 필드가 반환되었더라도 필드가 수정되었는지
    • SUBMITTING
      • AJAX로 제출 및 스피너 표시나 제출 버튼 색 회색으로 표시할 수 있다.
    • SUBMIT SUCCEEDED
      • 제출이 완료되었는지?
    • SUBMIT FAILED
      • 제출이 실패했는지?
    • SUBMIT ERRORS
      • 실패 했을 때 표시되는 오류 메세지는 무엇인지?
    • DIRTY SINCE LAST SUBMIT
      • 마지막 제출 이후 변경 되었는지

이런 복잡한 상태관리를 위해 REACT에서 가장 먼저 만들어진 라이브러리가 REDUX FORM이다.
(실제 발표자는 REDUX FORM을 만든 사람이고 다양한 질문을 받았다고 한다.)

  • 왜 리액트와 밀접하게 결합돼있는지?
  • 왜 Redux를 설치해야하는지?
  • 왜 실제로 아무것도 변경하지 않았을 때 내 양식의 일부를 다시 렌더링 해야하는지?
  • 왤케 용량이 큰지... 27kB... 이상이다.

이런 질문들은 받은 뒤 완벽한 FORM 라이브러리에 대해 생각을 다시 했다고 한다.

  • Pure javascript
  • Framework agnostic
  • Subscription based (ex, graphQL 같이)
  • Modular, pluggable solutions

==>> 그래서 발표자는 __FINAL FORM__을 만들었다.

  • Standalone form state management engine
  • Framework agnostic
  • Subscription based
  • Plugin capabilities
  • ZERO dependencies
  • 5.2kB gzipped

Final FORM은 프레임 워크에 구애받지 않지만 우리 개발자들은 그렇지 않다. (React 같은 경우 Ref로 처리해주거나 해야돼서.. 분명 우리가 고생일 것이다.)

==>> 그래서 발표자는 __React FINAL FORM__도 만들었다. (우와오오아ㅘ와와왕)

  • React bindings to Final Form
  • Maps form and field state to render props
  • Handles ReactSyncyheticEvents
  • Even smaller: 3.3kB gzipped
  • Total React Form Solution: 8.5 kB gzipped

번들 사이즈가 중요하고 2020년도 트렌드면 REACT FINAL FORM을 사용하쟈!
또한 Form라이브러리에 Hooks를 지원하는 최초의 라이브러리기도 하다!

React Final Form은 세 가지 주요 구성 요소로 구성된다.

  • - Wraps the entire form and provides form state to a render prop
  • - Registers a field and provides field state and callback functions to a render prop
  • - Provides a way to read form state from within your form without rerendering the entire form

About Hooks

  • useField()
    • Provides all the values that injects via render props
  • useFormState()
    • Provides all the values that injects via render props
  • useForm()
    • Provides the underlying Final Form from instance

이 라이브러리는
subscription을 사용하여 input 입력시 전체 field가 rerendering되는것을 방지 할 수 있다.

formSpy는 useState 값을 출력할 때 전체가 rerendering되는데 그걸 막이주는 역할을 한다.

How and when to choose a library

  • Complexity of the problem
  • Extensibility
  • Examples
  • Bundle Size
  • Github Stars and NPM Downloads
  • Does it make sense to you

React Form에 대해 많이 알 수 있는 기회가 되었다. 결국에는 만든 라이브러리 소개였지만 얼마나 많은 고민과 사례들을 생각하며 만든지 알 수 있었다. 특히 subscription은 graphQL에서 영향을 많이 준것 같은데 나중에 어떻게 구현됐나 코드를 한번 봐야겠다. 흥미로웠다.

⚠️ **GitHub.com Fallback** ⚠️