[React] antd Form 컴포넌트 내 Input value 속성 동적으로 사용하기

현재 관리자페이지를 ANT라는 CSS Framework를 이용해 구현중에 있다. 유저 정보를 검색하는 검색창을 구현할 때 html의 input태그가 아닌 antd의 Table과 Input 태그를 활용했는데, 값을 초기화하는 방식에 문제를 겪었다. 결론적으로는 나와 같은 해외 사례를 구글 서칭을 통해 발견하고 해결해 이 방법을 공유한다.

아마 대부분 검색창의 초기화 기능을 구현할 때는 input 태그 value 속성에 state 값을 부여하고, 초기화를 원할 때 setState를 통해 이 값을 빈값을 주어 초기화 기능을 구현할 것이다.

그런데, ant에서 Table과 Input 컴포넌트를 가져와서 사용하고 이 Input 컴포넌트 value 속성에 똑같은 방식으로 구현하려 했지만 잘 동작하지 않았다.

input태그에 value 속성을 부여하고 onchange 속성을 통해 값을 업데이트 하는 간단한 예시를 들어보면 다음과 같다.

import { Input } from 'antd'

// 중략

<Form onSubmit={initializeFilter()}>
  inputList.map((input)=>{
      <Input 
        name={input.name}
        value={filter.name}
        onChange={(e) => {
            setFilter([e.target.name]: e.target.value)
        }}
      />
  })
</Form>

여기서, antd의 Input 컴포넌트는 위와 같이 코드를 구현했을 때, 초기화가 이뤄지지 않았다. 그 이유를 찾기위해 antd 공식문서를 살펴보니 Input 컴포넌트 API에 다음과 같이 나와있었다.

value 속성에는 string값을 줘야한다는 부분이 걸려서, 문제가 여기에 있지 않을까란 생각을 했다. 그리고 구글링으로 나와 같은 사례가 있는지 검색을 해봤는데 stackoverflow 사이트에서 Form 컴포넌트의 fields 속성을 활용해야 한다는 글을 보고 공식문서를 찾아봤다.

Form 컴포넌트의 fields 속성은 form 영역(어디까지 의미하는 지는 모르겠으나, form 태그 안의 영역이라고 생각)의 state management를 control한다고 나와있었다. 이 속성을 통해 form태그 하위 input 태그의 value state를 컨트롤 할 수 있다고 생각해 예시를 참고해 다음과 같이 부여했다.

  const fields = [
    { name: ['level'], value: filters.level },
    { name: ['name'], value: filters.name },
    { name: ['nickname'], value: filters.nickname },
    { name: ['email'], value: filters.email },
    { name: ['hp'], value: filters.hp },
    { name: ['code'], value: filters.code },
  ];
  
 // 중략
 
 <Form fields={fields}>

위와 같이 feilds라는 배열을 선언하고, 검색창에서 사용될 Input 항목들의 name 값과 value 값을 부여하였다. 그리고 Form에 속성으로 부여한 결과 antd Input 태그의 value 값을 state로 관리할 수 있었다.