Ant Design 활용하여 수정 폼 구현하기

 

12월 2일부터 24일, 지금까지 계속 리액트로 미니 프로젝트를 진행 중이다. 

중간에 다른 이벤트들이 있어서 잠깐 보류한 적도 있었지만, 그래도 계속해서 달려오고 있고, 31일에 최종 마무리를 해서 완성할 예정이다.

사실 이번 프로젝트는 리액트를 알고 활용하면서 작품을 만든다기보다는 리액트를 배워나가면서 하나의 프로젝트를 완성시켜보는, 공부와 경험을 위한 프로젝트이다. 

그렇기 때문에 코드의 품질은 아직 신경쓰지 않고, 우선 기능 구현과 익숙해지는 것을 우선하면서 진행하고 있다. 

 CRUD 기능을 구현하고 있는데, 그중에 Update 기능을 어떻게 구현했는지 풀어서 써 보려고 한다.

사실 기능 구현은 다 했기 때문에 구현만 끝내고 넘어갈 수도 있겠지만, 한 번 정리를 해 두면 나중에 다시 같은 기능을 구현할 때는 시간을 더 절약할 수 있을 것이고 정리하면서 되짚는 기회도 될 것이다.

또 나는 Ant design을 활용해서 구현했지만 이 방법 말고도 다른 방법으로도 구현할 수 있는 방법을 알아야 하는데, 그것도 추후 다른 강의를 찾아보면서 배워보려고 한다. 

---

 

수정 폼을 구현하기 위한 단계 

1. 수정 폼이 있어야 한다. Ant Design의 Modal과 Form을 사용했다.
2. 해당하는 Data가 Form Field 안에 이미 채워져 있어야 한다.
3. 유저가 채워진 데이터를 수정할 수 있어야 하고, 수정된 데이터가 json 데이터(DB)에도 반영되어야 한다.
4. 수정된 데이터를 UI에도 반영하기 위해 다시 렌더링을 해 줘야 한다.

 

1. 수정 폼이 있어야 한다. Ant Design의 Modal과 Form을 사용했다.

 

그냥 Form을 사용하는 것이 아니라, Modal 안에 Form을 사용하는 구조이기 때문에 초반에 헤매기도 했다. 

그런데 구현하고 보니 만족스러웠다. Ant design의 깔끔한 모달 UI가 마음에 들었다. 

아무튼, Ant design의 Modal 컴포넌트 내부에 Form 컴포넌트를 중첩해서 넣어 주면 저런 식으로 활용할 수가 있다. 

기본 버튼에서는 cancel과 ok인데, 이것도 Modal 컴포넌트에서 사용 가능한 API를 보고 커스터마이징이 가능하다. 

title, visible, onCancel, okText, onOk 등 유용하게 사용할 수 있는 속성들이 많았고, 이것들을 활용하면 모달과 폼도 쉽게 만들 수 있었다. 

이것을 내가 손수 자바스크립트와 CSS로 코딩한다면 한세월이 걸릴 텐데, 정말 편리하다는 생각이 들었다. 

 

2. 해당하는 Data가 Form Field 안에 이미 채워져 있어야 한다.

위 캡쳐와 같이 해당하는 영화 데이터가 폼 필드 안에 채워져 있어야 한다. 

Detail 컴포넌트 내부에 위치

그러기 위해서 해당하는 movie 객체(제목, 영화감독 등 정보가 들어있는 object)를 props로 넘겨 줘야 한다. 

그러면 MovieModal은 이것을 받아서 initialValues라는 속성 값으로 넣어 주면 된다. 

rating의 경우, 영화 별점의 1/2 만큼의 별을 보여줘야 하기 때문에 따로 계산한 변수를 rating key 값으로 넣어주었다. (이 부분은 12월 24일 TIL에 좀 더 자세히 적어놓았다.) 

 

3. 유저가 채워진 데이터를 수정할 수 있어야 하고, 수정된 데이터가 json 데이터(DB)에도 반영되어야 한다.

유저가 영화 수정을 끝마치면, 완료 버튼을 누르게 된다. 

완료 버튼을 눌렀을 때 실행되어야 하는 로직이 Modal의 onOk에 콜백 함수로 담겨져 있다.

우선 validateFields()를 이용해 정규 표현식 규칙에 맞는지, 유효한지 체크를 한다. 

나는 영화 포스터를 제외한 모든 요소들(제목, 감독, 연도, 별점, 장르, 설명)을 required로 설정해 필수적으로 입력하지 않으면 등록되지 않도록 설정했다.

이런 식으로 입력이 안 되어 있으면 알려 주고, Done을 눌러도 수정내역이 반영되지 않는다. 

만약 모든 필드가 채워져서 유효성 검사를 통과하게 되면 then 안의 로직이 실행된다. 

여기서 values라는 파라미터에는 수정이 반영된 객체가 들어가게 된다. 

form.resetFields()는 수정 폼을 위한 것은 아니고, 영화 생성 폼을 위한 것이다. 프로젝트 내에서 모달을 두 번 쓰기 때문에 로직이 섞여져 있다. 이것은 영화 생성 후 Form의 모든 내용을 비워서 다음에 생성할 때 내용이 없도록 하기 위함이다. 

만약 movie 객체가 없는 상황이라면, onCreate 함수에 values를 인자로 넘겨서 영화를 생성해준다.

만약 movie 객체가 있는 상황이라면 수정하는 것이니 onOk 함수에 values를 인자로 넘겨서 영화를 수정해준다. 

그리고 form.setFieldsValue(values)로 폼에 채워지는 내용들 역시 업데이트를 해 준다. 

유저가 수정한 후의 객체인 values는 Detail 컴포넌트에 있는 handleEdit 함수의 인자로 넘어온다.

axios의 patch 메서드를 사용해 id에 해당하는 부분만 업데이트를 해 주고, 재 렌더링을 해 준다.  

 

4. 수정된 데이터를 UI에도 반영하기 위해 다시 렌더링을 해 줘야 한다.

axios의 get 메서드를 활용해 해당 url로부터 수정이 반영된 데이터를 가져오고, 그 데이터를 setMovie의 인자로 넣어 movie를 바꿔 준다. 

 

---

 

공부하는 과정 중에 정리를 한 것이기 때문에 설명이 부족하거나 틀린 부분이 있을 수 있다. 

그런 부분은 피드백을 받아서 고치거나, 혹은 미래의 내가 고쳐 볼 예정이다.