공통함수 분리하기

중복체크라는 버튼의 활용범위

 

1. 회원가입 시에 email 체크시 사용

2. 프로필에서 닉네임 변경 시 사용

3. 기타.. 당장 생각은 안나지만 또 쓸일이 있을수도 있다.

 

 

밑에 사진의 코드가 회원가입 컴포넌트와 프로필 컴포넌트 2군데에 중복으로 작성 되어있다.

회원가입에만 작성을 하고 export 로 공유하는 방법도 있겠지만?

 

또는 .. 커스텀훅으로 어찌어찌만들면 되겠지만 훅까지 만들 필요는 없어보였고 중복되는 함수만 분리해내면 될 것 같아서 공통함수 분리라는 타이틀로 작업하게 됬다.

 

현재도 기타 다른공부로 인해서 온전히 이 프로젝트에만 시간을 할애하는것도 아니기 때문에 충분히 내 머릿속은 복잡한데,

좀 더 복잡해지기전에 체계?폴더구조? 를 확실하게 잡기위해서 따로 빼자는 생각을 했다.

파라미터

 

1. e.preventDefault() 

 

기본이벤트를 막는 메서드로 보통 form 태그 안에 버튼이 있을 때 버튼을 눌렀을 때 submit 되는 이벤트를 막기 위해서 사용된다.

현재 이 버튼도 form 태그안에 존재하기 때문에 submit 의 이벤트가 동작하지 않게 막아줘야한다.

 

 

2. type 

type TSignUp = Pick<IUserForm, "email" | "password" | "password_confirm">;
type KSignUp = keyof TSignUp;

// KSignUp = "email" | "password" | "password_confirm"

useState 에 알맞는 프로퍼티에 값이 들어갈수있게 정의 해준다.

 

 

 

3. vale

 

입력 값은 string 으로만 받을 수 있다.

 

---

공통함수 분리하기

export type duplicateType = Partial<IUserForm>;

 const [checkVal, setCheckVal] = useState<duplicateType>({
    email: "",
    password: "",
    password_confirm: "",
    profileImg: "",
    username: "",
  });

export const handleDuplicate = (
  e: React.MouseEvent<HTMLButtonElement>,
  type: keyof duplicateType,
  val: string,
  setCheckVal: React.Dispatch<React.SetStateAction<duplicateType>>
) => {
  e.preventDefault();

  setCheckVal({
    [type]: val,
  });
};

기존 함수가 위의 함수로 변신했다.

setCheckVal 이 추가 된거 제외하고는 사실 딱히 달라진 것은 없지만 이런식으로 공통으로 들어가는 함수에 대한 중복코드를 제거할수 있다는 장점이 있다.

 

사용방법

정말 포스팅하고 나서 보면 별것도 아닌걸 이만저만 써논거 같기도하지만

 

요즘은 좋은 코드란 무엇일까 코드 수준이 높다 낮다 코딩 실력이라는게 뭘까 라는 생각을 하면서

코딩스타일? 패러다임에 관심이 가기 시작했고 함수형 프로그래밍이라는 기법을 간단하게 유튜브로 접한 적이 있다.

지금의 이 중복체크라는 공통함수가 인풋과 아웃풋이 명확한 순수함수의 함수형 프로그래밍 기법은 아니라고 생각하지만

그래도 내 스스로가 코드 스타일을 따라가보려고 하는 작은 변화가 있는 것 같아서 성장되고 있다는 걸 조금 느끼는 것 같다.