react-hook-form
import useform
react-hook-form 패키지에서 useForm() 훅을 불러와, 컴포넌트 함수 안에서 훅을 호출한다.
해당 결과로 register()과 handleSubmit()를 얻을 수 있다. (즉, 사용할 함수 적으라는 것)
register()로 입력란을 등록, handleSubmit()으로 submit 이벤트를 처리한다.
입력한 내용을 alert로 브라우저에 띄운다. (잘 받았는지 확인하기 위해서)
중복 제출 방지
form에서 이벤트 처리가 종료되기 전에 다시 버튼을 클릭할 경우 양식이 중복 제출되는 문제를 막기 위한 코드이다.
작성한 코드는 처음 제출 버튼을 클릭했을 때, 버튼을 비활성화 시킨다. 이후 이벤트가 종료되면 제출 버튼을 다시 활성화시키는 방식으로 중복 제출을 방지한다.
formState 속성은 양식이 현재 어떤 상태인지를 담는다. formState에 isSubmitting 속성을 읽어서 양식이 제출중인 상태인지 아닌지를 알아낸다.
제출 버튼의 disabled 속성에 isSubmitting 값을 설정하여, 회원가입 버튼의 양식 제출이 끝날때 까지 비활성화시킨다.
유효성 검사
이메일, 비밀번호와 같은 입력란은 필수 입력으로 하고, 이메일과 핸드폰번호는 유효한 형식이 정해져있기 때문에 해당 형식을 맞춰야 제출이 가능하도록 한다.
register()의 두번째 인자로 옵션을 넘겨주면 유효성 검증이 가능하다.
검증 타입은 required, pattern, minLength 등이 있다.
message에는 유효하지 않은 형식일 경우 출력되는 오류 메세지를 담는다.
입력한 값이 유효하지 않을 경우 form이 제출되지 않고, formState 속성의 errors 객체에 오류 내용이 저장된다. 이때, error.phone&&<Warning>~ 코드로 저장된 에러 메세지를 출력하도록 했다.
aria-invalid는 스크린리더 사용자를 위한 것으로 일단은…? 굳이 작성하지 않아도 된다.
MUI
공식문서를 참고하여 TextField와 Button 컴포넌트를 불러와 사용했다.
종합소감
react-hook-form을 사용하여 form을 만들어 봤다. 이전에는 html로만 작업했다면 이번에는 해당 라이브러리 사용하여 작업했더니 좀 더 상세한 기능을 쉽게 작업할 수 있어서 좋았다.
그리고 MUI를 사용하여 디자인을 작업했는데, 디자인을 어떻게 할 지 크게 신경을 쓰지 않아서 좋았다. 다음번에 프로젝트 할 때에도 유용하게 사용이 가능 할 듯 싶다.
UMC, Web 스터디를 마치며
해당 기록들은 UMC 동아리 활동 중 Web 스터디의 과제이다.
동아리가 신설되고 입부하면서 Web 스터디장을 맡게 되었다. 내가 적극적으로 스터디장을 하고 싶다는 어필을 통해 하게 되었다. 처음에는 원대한 꿈을 가지고.. 파트장을 했으나, 이후에 갈 수록 생각한 것 처럼 못한게 끝이 나니 아쉽게 느껴진다.
스터디를 진행하면서 본격적으로 React를 사용해보았다. 이전에는 강의를 보면서 따라만 했다면, 이번에는 직접 어떻게, 어디에 사용해야 하는지 고민을 하며 공부하고 적용하였다. 정말 쉽지 않았고 때려치고 싶었던 적이 한 두번이 아니지만, 파트장이라는 위치와 앞으로의 프로젝트들을 위해 대충하지 않고 정말 열심히 진행했다.
스터디를 진행하면서 새롭게 알게 된 지식도 있었고, 이름만 알았던 개념들의 상세 내용도 알 수 있었다. 단순히 글을 읽는 것이 아닌 직접 배우고 활용하면서 몸소 깨달을 수 있었다.
또한, 스터디를 통해 다른 사람에게 나의 지식을 공유하고, 질문하고, 같이 문제를 해결해 나가면서 역시 혼자 공부할 때보다 누군가 나의 문제를 듣고 같이 고심해줄 사람이 있다는 것에서 공부에 대한 불안감이 줄어들고 안정감을 얻을 수 있었다. 물론, 모두 해결할 수는 없었지만 같이 할 사람이 있다는 것에서 오는 안정감이 나를 편안하게 해주었다.
매주 과제를 하면서 힘들기도 많이 힘들었고, 짜증도 났지만 지금 그 시간들로 인해 내가 더 성장했다는 것은 부정할 수 없는 사실이다. 그리고 여름방학동안 진행해야 할 프로젝트 2개 모두, 이번 스터디의 과제들을 수행하면서 배운 지식들을 적극 활용하게 될 것이다. 대략 2달동안 매주 과제를 수행하느라 힘들기도 했지만..! 이로 인해 배운점도, 많았기 후회없는 정말 참여하기 잘 했다는 생각이 들었다.
Comments