React & Ant Design : 글쓰기 기능 구현하기 (Form)

 

이번엔 글쓰기 기능을 구현해 보자.

저번에 UI는 완성해 놓았다. Ant Design을 활용해서 깔끔한 UI가 완성되었다.

 

커뮤니티 메인 페이지의 '글쓰기' 버튼을 누르면, 이 페이지로 이동된다.

 

🚀 목표

글쓰기 버튼을 눌렀을 때, 임시 DB 파일인 data.json에 작성한 글이 등록되도록 하는 것이 목표이다. 

이 역시 저번에 했던 영화 앱에서 했던 것과 매우 유사한데, 그 당시에는 TIL에만 간략하게 정리하고 따로 게시물로 정리해 놓진 않아서 이번 기회에 정리해 보려고 한다. 

 

🤔 고민했던 것

글을 작성한 후 글쓰기 버튼을 눌렀을 때, 모달이 떠서 '정말 작성하시곘습니까?' 같은 안내 문구가 또 나오게 해야 하나 싶었다. 그런데 다른 웹 사이트의 글쓰기 기능을 본 결과, 있어도 그만 없어도 그만 같았다. 그래서 일단은 넣진 않는 걸로. 

 

✅ 유효성 검사

글 제목이나 내용 중 한 가지라도 아무것도 작성하지 않았다면 등록될 수 없도록 해야 한다.

Form 상위 태그 안에 있는 각각의 아이템들, 즉 Form.Item에 해당하는 name을 부여해 준다. 

그리고 rules에 위와 같이 입력해준다.

제출 버튼인 글쓰기 버튼에는 htmlType="submit"을 추가해준다. 

그러면 Ant Design의 스타일로 테두리와 안내 문구가 빨갛게 나오게 된다. 

 

✅ Input Value 받기

Form의 Input 창에 입력한 값을 받아오기 위해서는 위와 같이 onFinish를 활용한다. 

data.json에 저장될 때, 이런 형식으로 저장되어야 한다. 

우선  title, category, content, createAt 이 네 가지가 제대로 반영되는 것을 목표로 한다. 나머지는 백엔드와 논의하거나 로그인 기능을 어떻게 연동해 나갈지에 따라 달라지게 된다.

moment 라이브러리를 활용해 날짜와 시간을 현재로 저장할 수 있도록 했다. 

카테고리도 유저가 현재 설정한 것으로 저장될 수 있도록 useState를 활용해서 해 줬다. 이 로직은 Community 페이지에서 필터링 하던 것과 유사한 부분.

 

✅ axios 이용해서 data.json에 글 추가 

id는 내가 따로 신경쓰지 않았는데도 알아서 추가가 잘 되어 준다. (이 부분은 왜 잘 되는지 모르겠다)

아무튼 post 요청을 비동기적으로 해주면 저렇게 잘 추가가 된다.

 

✅ 글쓰기를 완료하면 커뮤니티 페이지로 이동시키기 

결과 페이지로 이동시키기 | {React 개발에서 배포까지}

위 포스팅을 참고해서 작성하였다. 

작성 완료 후 community 페이지로 이동 

다른 페이지로 보내기 위해서는 history 객체를 사용해야 한다. 

HTML의 window 객체에는 history라는 객체가 있다. 여기엔 브라우저에서 유저가 이곳저곳 다녔던 기록이 남아 있다. 

// 뒤로가기
window.histroy.back();

// 앞으로가기
window.histroy.forward();

// 특정 위치로 가기
window.history.go(-1);

위와 같은 식으로도 활용이 가능하다고 한다.

React에서는 window 객체를 직접 접근해서 사용하는 방법을 사용할 수도 있긴 하지만, 주로 react-router-dom이 제공하는 useHistory hook을 활용한다고 한다. 

확인 결과, 커뮤니티 페이지로 이동이 잘 되고 글 작성도 잘 되었다. 

코드를 좀 더 효율적으로 수정해야 할 수도 있지만, 우선 기능 구현은 완료!