NodeBird 복습/React

react nodeBird 1-4 (회원가입폼&커스텀 훅)

2021. 4. 11. 11:11
목차
  1. 커스텀 훅 만들기
반응형

pages/signup.js

  웹사이트에 회원가입을 할 수 있는 폼을 만듭니다. 기존에 만든 Form처럼 만들면 됩니다. 

3개의 항목이 비슷하게 중복됨을 볼 수 있다.

  값이 바뀌는 코드(onChange)를 작성하다보면 id, nickname, password가 중복되는것을 볼 수 있습니다. 중복된 항목들은 따로 컴포넌트로 빼서 중복 코드를 하나의 함수로 만들어주는 커스텀 훅으로 변경할 수 있습니다. 

커스텀 훅 만들기

hooks 디렉토리 안에 useInput이라는 파일을 만들어주고, 코드를 작성합니다. 

커스텀 훅을 만들어보자

함수 안에 중복되는 부분들을 적어준 뒤 return 값을 value와 handler로 받아줍니다.

커스텀 훅을 이용하면 코드양을 줄일 수 있다.

 

위 코드대로 커스텀 훅을 작성하면 오류 메시지를 볼 수 있는데 위 캡쳐처럼 바꿔주시면 됩니다. 이유는 핫리로딩 해주는 라이브러리가 바껴서 그렇습니다.

 

비밀번호, 약관동의 한번 더 체크하기

마지막으로 onFinish에서 비밀번호와 약관동의를 한 번 더 체크를 해줌으로 더 견고하게 코드를 작성할 수 있습니다. 또한, console.log를 통해 회원가입의 중요한 데이터인 id, nickname, password값이 정상적으로 백엔드에 전송될 수 있는지 확인해볼 수 있습니다. 

반응형

'NodeBird 복습 > React' 카테고리의 다른 글

react nodeBird 1-6(Reducer 쪼개기 & PostForm 만들기)  (0) 2021.04.14
react nodeBird 1-5(Redux 적용시키기)  (0) 2021.04.13
react nodeBird 1-3(styled-components)  (0) 2021.04.10
react nodeBird 1-2(로그인폼 만들기)  (0) 2021.04.09
react nodeBird 1-1(antd 이용하기)  (0) 2021.04.09
  1. 커스텀 훅 만들기
'NodeBird 복습/React' 카테고리의 다른 글
  • react nodeBird 1-6(Reducer 쪼개기 & PostForm 만들기)
  • react nodeBird 1-5(Redux 적용시키기)
  • react nodeBird 1-3(styled-components)
  • react nodeBird 1-2(로그인폼 만들기)
맑쇼
맑쇼
개발공부하기
맑쇼
맑쇼맑쇼
맑쇼
전체
오늘
어제
  • 분류 전체보기 (31)
    • JavaScript (1)
    • 프론트엔드 (1)
    • 에러일지 (3)
    • NodeBird 복습 (26)
      • React (15)
      • node.js (9)
      • 서버사이드렌더링 (2)

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록

공지사항

인기 글

태그

  • 서버사이드렌더링
  • 노드
  • 넥스트제이에스
  • 익스프레스
  • Nodejs
  • 자바스크립트
  • MYSQL
  • router
  • CI/CD
  • 리덕스
  • JavaScript
  • Backend
  • Next
  • 개발공부
  • node
  • 멀터
  • 리액트
  • redux-saga
  • React
  • next.js
  • 라우터
  • Express
  • 리덕스사가
  • reudx-saga
  • 백엔드
  • nextjs
  • redux
  • 넥스트js
  • 넥스트
  • multer

최근 댓글

최근 글

hELLO · Designed By 정상우.
맑쇼
react nodeBird 1-4 (회원가입폼&커스텀 훅)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.