<commit_before>---
layout: post
id: using-forms-in-react-redux-tips-and-tricks
title: React-Redux에서 forms 사용하기: 팁과 트릭들
tags: [React, Redux, Redux-Form]
---
[원문보기](https://hackernoon.com/using-forms-in-react-redux-tips-and-tricks-48ad9c7522f6#.rjayg450p)

예전에 React와 Redux로 옮겨가면서 배운 몇 가지 교훈에 관한 [포스트](https://medium.com/@royisch/6-lessons-learned-from-going-to-production-with-react-redux-19257f6724f6#.xu43yqlko)를 작성했었다.

그 뒤로 꽤 긴 시간이 지났지만 아직도 React와 그 친구들을 사용하고 있고, 더 공유해보고 싶은 것이 있다. 무엇이 가장 큰 고통이며 어떻게 그것을 이겨낼 것인가 하는 것 말이다. 그것은 바로 forms를 구현하는 것이다.

많은 웹 애플리케이션들은 폼 기반이다. 당신의 플랫폼을 사용자에게 제공하려는 목적으로 사용자로 하여금 폼을 채우고 폼 컴포넌트를 조작하게끔 한다. 곧, 폼 컴포넌트를 React에서는 어떻게 사용하고 작성해야 하는지에 대한 의문이 생긴다. 그리고 React와 Redux가 어떻게 함께 동작하는지도 말이다. 예를 들어 다음과 같은 의문들이다.

 - # 컴포넌트는 어떻게 동작해야 하는가?
 - # 데이터를 어디에 유지해야 하는가?
 - # 유효성 검사는 어떻게 수행하는가?
 - # 폼의 상태와 그 변화는 어떻게 탐지하는가?

[Bizzabo](https://www.bizzabo.com/)에서는 꽤 많은 페이지들이 폼 기반이다. 이 페이지들은 꽤 오래전부터 해왔던 것이기 때문에 Backbone.js를 사용했던 동안 어떤 도전들이 있었고 어떤 가이드가 필요한지 알고 있었다. 그러나 React는 또다른 경기장이였고, 사용자가 수월하게 폼의 내용을 채우게 하기 위해서는  Backbone을 사용한 폼이나 React를 사용한 폼이나 차이점을 느끼지 못해도록 해야 한다. 그러나 한편으로는 이 모든 물음들에 대한 대답을 위해 폼을 사용하는 방법을 완전히 새롭게 설계했다.

이 물음들에 대답하기에 앞서, 결과부터 이야기하자면 우리는 [redux-form](http://redux-form.com/)을 사용했다. [<NAME>](https://github.com/erikras)에 의해 만들어진, redux 위에서 동작하는 폼 상태 관리 라이브러리로, 매우 잘 관리되고 있다.

## # 컴포넌트가 어떻게 동작해야 하는가?

시스템 내의 모든 폼 컴포넌트는 사용자 인터페이스 동작을 가지고 있어야만 한다. 예를 들어 input을 보자면, 많은 상태를 가지고 있다: 유효한지, 터치되었는지, 포커스되었는지, 더티상태인지 등등. 당신은 이러한 모든 상태가 시각적으로 표현되기를 원할 것이다. 에러나 경고를 표시하는 등 말이다. 우리는 Redux-form의 솔류션을 선택했다. 이 솔류션은 컴포넌트의 상태에 대한 메타 정보를 제공한다. 과연 redux form 컴포넌트를 어떻게 사용할까? <Field /> 컴포넌트는 어떻게 각각 개별적인 input과 어떻게 Redux 스토어를 연결시킬까?(다음 주제에서 이를 연마할 것이다)

```js
<Field name={keyName} component={MyCustomInput} {...this.props} /><commit_msg>fix title<commit_after>---
layout: post
id: using-forms-in-react-redux-tips-and-tricks
title: React-Redux에서 폼 사용하기 - 팁과 트릭들
tags: [React, Redux, Redux-Form]
---
[원문보기](https://hackernoon.com/using-forms-in-react-redux-tips-and-tricks-48ad9c7522f6#.rjayg450p)

예전에 React와 Redux로 옮겨가면서 배운 몇 가지 교훈에 관한 [포스트](https://medium.com/@royisch/6-lessons-learned-from-going-to-production-with-react-redux-19257f6724f6#.xu43yqlko)를 작성했었다.

그 뒤로 꽤 긴 시간이 지났지만 아직도 React와 그 친구들을 사용하고 있고, 더 공유해보고 싶은 것이 있다. 무엇이 가장 큰 고통이며 어떻게 그것을 이겨낼 것인가 하는 것 말이다. 그것은 바로 forms를 구현하는 것이다.

많은 웹 애플리케이션들은 폼 기반이다. 당신의 플랫폼을 사용자에게 제공하려는 목적으로 사용자로 하여금 폼을 채우고 폼 컴포넌트를 조작하게끔 한다. 곧, 폼 컴포넌트를 React에서는 어떻게 사용하고 작성해야 하는지에 대한 의문이 생긴다. 그리고 React와 Redux가 어떻게 함께 동작하는지도 말이다. 예를 들어 다음과 같은 의문들이다.

 - # 컴포넌트는 어떻게 동작해야 하는가?
 - # 데이터를 어디에 유지해야 하는가?
 - # 유효성 검사는 어떻게 수행하는가?
 - # 폼의 상태와 그 변화는 어떻게 탐지하는가?

[Bizzabo](https://www.bizzabo.com/)에서는 꽤 많은 페이지들이 폼 기반이다. 이 페이지들은 꽤 오래전부터 해왔던 것이기 때문에 Backbone.js를 사용했던 동안 어떤 도전들이 있었고 어떤 가이드가 필요한지 알고 있었다. 그러나 React는 또다른 경기장이였고, 사용자가 수월하게 폼의 내용을 채우게 하기 위해서는  Backbone을 사용한 폼이나 React를 사용한 폼이나 차이점을 느끼지 못해도록 해야 한다. 그러나 한편으로는 이 모든 물음들에 대한 대답을 위해 폼을 사용하는 방법을 완전히 새롭게 설계했다.

이 물음들에 대답하기에 앞서, 결과부터 이야기하자면 우리는 [redux-form](http://redux-form.com/)을 사용했다. [<NAME>](https://github.com/erikras)에 의해 만들어진, redux 위에서 동작하는 폼 상태 관리 라이브러리로, 매우 잘 관리되고 있다.

## # 컴포넌트가 어떻게 동작해야 하는가?

시스템 내의 모든 폼 컴포넌트는 사용자 인터페이스 동작을 가지고 있어야만 한다. 예를 들어 input을 보자면, 많은 상태를 가지고 있다: 유효한지, 터치되었는지, 포커스되었는지, 더티상태인지 등등. 당신은 이러한 모든 상태가 시각적으로 표현되기를 원할 것이다. 에러나 경고를 표시하는 등 말이다. 우리는 Redux-form의 솔류션을 선택했다. 이 솔류션은 컴포넌트의 상태에 대한 메타 정보를 제공한다. 과연 redux form 컴포넌트를 어떻게 사용할까? <Field /> 컴포넌트는 어떻게 각각 개별적인 input과 어떻게 Redux 스토어를 연결시킬까?(다음 주제에서 이를 연마할 것이다)

```js
<Field name={keyName} component={MyCustomInput} {...this.props} />
{'fraction_non_alphanumeric': 0.10002841716396704, 'fraction_numerical': 0.013640238704177323, 'mean_word_length': 3.4, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 8, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5627995', 'n_tokens_mistral': 3017, 'n_tokens_neox': 3696, 'n_words': 561}