2. 커스텀 훅으로 Form 컴포넌트 만들어보기

1. 커스텀훅이란?

리액트에서 함수형 컴포넌트를 쓸 때 상태관리나 생명주기관리 등을 위해서 사용하는 것이 리액트에서 제공하는 useState, useEffect와 같은 내장 훅이다.

이런 훅을 개발자가 자기의 입맛대로 커스텀해서 사용하는 것을 커스텀 훅이라고 한다.

자주 사용하는 패턴이 있을 때 코드의 중복을 피하기 위해서는 각 패턴별로 필요한 처리를 별도의 파일로 빼두었다가 필요한 곳에서 import해서 사용하는 것이 효율적이기때문에 커스텀훅을 사용하는 것이 좋다.

이때문에 커스텀훅을 만들 때 가장 중요한 것은 재활용성이 높도록 작성을 하는 것이다.

 

오늘 배운 form 컴포넌트로 예를 들어보면

회원가입, 로그인, 글쓰기, 글수정 등등.. form엘리먼트를 사용하는 곳이라면 어디든 불러와 활용할 수 있게끔 훅을 만들어야한다.

 

기존의 수업이나 프로젝트에서 만들었던 form이 있는 페이지에서 처리한 내용은 다음과 같다.

1. form안의 여러 input엘리먼트가 개발자가 요구하는 양식으로 채워졌는지 체크한다.

    - 회원가입이라면 비밀번호와 비밀번호 확인 인풋에 같은 값이 들어와있는지, 이메일칸에는 이메일양식에 맞는 값이 들어와있는지 등등

    - 글쓰기 페이지라면 첨부된 파일의 숫자가 개발자가 제한한 수를 넘지는 않았는지, 제목이 비어있지는 않은지 등등

2. 위의 폼체크에서 문제가 없다면 입력한 내용을 axios등의 비동기 통신을 사용하여 서버로 넘겨 db를 수정한다.

 

이 과정을 하나의 커스텀훅을 사용해 범용성있게 활용하고자 한다면

커스텀 훅의 인자로 각 상황마다 달라지는 내용을 넣고 (페이지별 input의 이름, submit시에 실행될 axios 함수, 폼체크 함수)

커스텀훅의 리턴값으로는 form엘리먼트에서 항상 필요로 하는 값을 받으면 된다. (인자로 넣은 input별 props객체,  폼체크 확인 결과값, form의 onSubmit시 실행할 함수)

 

 

 

2. 커스텀훅을 사용한 Form 컴포넌트 만들어보기

필요한 파일은 다음과 같이 나누었다.

1. jsx로 리턴되는 form 컴포넌트 파일

2. form에 필요한 로직을 묶어둔 useForm 커스텀훅 파일

3. 폼체크를 위한 validate 함수 파일

 

각각의 파일에서 처리해줄 내용은 다음과 같다.

Form.jsx

1. useForm.js와 validate.js를 import
2. useForm의 인자로 다음을 넣음 ( 👈 페이지별로 달라지는 값 )
    -input엘리먼트의 초기값을 담은 객체
    -axios 보내는 코드를 담은 submit request 함수
    -validate 함수 입력
3. useForm의 결과로 다음을 받음
    - input항목별 value state와 onChange 함수를 담은 props객체
    - validate 결과를 처리한 뒤 반환된 errors 객체
    - submit버튼의 활성상태를 담은 submit state
    - form의 onSubmit시 실행할 함수
4.  useForm에서 리턴받은 props와 errors, onSubmit함수를 리턴할 jsx의 엘리먼트에 넣어줌.


- Form 컴포넌트 내에서는 복잡한 코드 없이 useForm() 훅 한 줄로 필요한 설정(state생성, onChange, onSubmit함수 생성 등)을 다 해줄 수 있기때문에 코드가 깔끔해진다!

useForm.js

1. useState를 이용해 상태 생성
    - input value를 모두 담은 values 
    - form submit 버튼 활성상태를 담은 submit
    - input value의 양식을 체크하여 각각의 에러값을 가지고 있는 errors
2. onChange 함수 : 사용자가 input에 입력한 값으로 values state를 바꿔주는 함수. 👉 모든 input에 사용가능하도록 짜야함
3. handleSubmit 함수 : 사용자가 submit 버튼 클릭 시 실행되는 함수. submit, errors 상태를 업데이트 해줌.
4. useEffect 함수 : handleSubmit으로 바뀐 errors 상태를 추적하여 errors가 빈 객체일때 (모든 폼체크를 통과했을 때) 인자로 받았던 onSubmit함수(axios 통신이 일어남)를 실행시킴

1,2,3,4를 객체로 묶어 리턴해줌.
❗️input value를 담은 state와 onChange함수를 하나의 객체로 묶어서 리턴해줘야함. props로 input엘리먼트에 전달해 사용할 수 있도록 👉 reduce 메소드를 이용해서 처리해주면 편하다.

validate.js

1. input의 value값들을 객체로 묶어 인자로 전달받음.
2. 각각의 input별 양식에 맞는지 체크해줌 👉 이 코드가 각 페이지 별로 달라짐 (회원가입페이지인지, 글쓰기페이지인지 등등)
3. 각 input 별로 에러 내용을 객체로 담아 return 해줌

 

각각의 파일에서 뭘 인자로 받아서 뭘 리턴하는지를 생각해보면 전체적인 흐름을 이해하는데 도움이 된다!

 

 

리액트를 배우면서 기존에 자바스크립트로 해왔던 방식과는 완전히 다르게 코드를 짜야한다는게 아직은 많이 낯설다. 설명을 들으면 감이 좀 잡히는데 혼자서 짜보라고 그러면 어떻게 시작해야 될 지 모르겠고.. 그런 상태??

어디서 무슨 처리를 해줘야하고 또 어느 부분을 묶어서 별도의 함수로 빼면 좋을지 이런 걸 좀 깊게 생각하면서 좋은 코드를 짤 수 있도록 해야겠다.