쌓아가는 개발 스토리

회원가입 페이지를 구현하는데 있어 이메일 형식 검사나 비밀번호 일치확인 검사가 필요하였고 이를 위해 커스텀 훅을 사용하였다. 다음은 useInput 커스텀 훅으로 input 태그의 입력 값을 관리하는 코드이다. import { useState, useCallback } from "react"; import { signUpInputType } from "../../../types/userDto"; export const useInput = () => { const [signUpForm, setSignUpForm] = useState({ email: '', id : '', // 사용자 ID (이메일 형식) password : '', // 비밀번호 gender : '', // 사용자 성별, 'M' : 남자, ..

react에서 게시글에 댓글을 작성할 수 있는 기능을 개발하고자 했다. input태그에서 텍스트를 입력하고 게시 버튼을 클릭하면 댓글이 작성되도록 만들었는데 Enter키를 눌렀을때도 같은 동작을 할 수 있도록 하고싶었다. 다른 페이지에서도 이를 활용할 가능성이 있어 Custom hook으로 빼서 개발을 진행하였다. 호출하는 부분 const [comment, setComment] = useState(""); const { buttonRef, handleKeyDown} = useBtnWithEnter(EventCommentCreate); // 커스텀 훅 /* 댓글 달기 Event */ const EventCommentCreate = () =>{ 통신하는 부분 ... setComment(""); // 통신 성..

회원가입 페이지를 구현하는데 휴대폰 번호를 입력받아야 했다. 010-1234-5678 형식으로 자동으로 하이푼(-)이 생성될 수 있도록 하고싶었다. 이를 위해 input 태그의 onChange이벤트를 통하여 handlePhone함수를 호출하였고 handlePhone 함수에서 검사를 통해 state를 업데이트 하였다. const [phone, setPhone] = useState(''); const handlePhone = (value: string) => { const onlyNumber = value.replace(/\D+/g, ''); const numberLength = 11; let result = ""; for(let i=0; i { handlePhone(e.target.value); }, [p..