react로 회원가입(1)-커스텀훅,구조분해할당,useCallback

박준수·2022년 11월 11일

react로 회원가입 구현하기

목록 보기

1/3

회원가입 기능

웹 서비스를 만든다면 제일 처음에 만드는 기능은 회원가입이지 않을까 싶다.
다양한 회원가입 형식들이 있지만 이번에 내가 사용한 방식을 작성해보고자 한다.
우선 기입사항은 아이디(이메일), 비밀번호, 비밀번호 확인 이렇게 3가지의 기본형태이다.

커스텀 hook

회원가입과 로그인에 사용되는 input은 꽤나 자주 같은 방식으로 사용되기에
useInput이라는 hook을 만들어 관리하면 편하다.
여기서 크게 짚고 넘어갈게 두가지 있는데
하나는 구조분해할당, 다른 하나는 useCallback이다.

구조분해할당

구조분해할당은 객체나 배열을 변수로 ‘분해’할 수 있게 해주는 특별한 문법이다.
따라서 사용할때 const [id, onChangeId] = useInput(""); 을 하면
useInput은 반환값으로 value,handler,setter를 반환하고(여기서 지금당장은 setter가 쓰이지 않는다.)
이때 value와 handler는 각각 useState의 상태값과 useCallback의 함수인데(useState의 set함수가 들어있는)
우리는 이 value와 handler를 그대로 사용하면된다.
사용할때는 value가 id이고 onChange가 onChangeId이다.
이렇게 하면 input값이 바뀔때마다 그 안의 value값도 바뀌게 된다.
그럼 그냥 useState를 쓰면 되지 왜 이렇게 하는 걸까?

import { useState, useCallback } from "react";

// eslint-disable-next-line import/no-anonymous-default-export
export default (initValue = null) => {
  const [value, setter] = useState(initValue);
  const handler = useCallback(e => {
    setter(e.target.value);
  }, []);
  return [value, handler, setter];
};

////////////////////////////////////////////////////////////////
//in Singup.jsx 에서 사용함 위와 다른 컴포넌트//
const [id, onChangeId] = useInput("");

////////////////////////////////////////////////////////////////
//in Singup.jsx 에서 사용함 위와 다른 컴포넌트//
								<input
                  ref={idRef}
                  type="id"
                  value={id}
                  onChange={onChangeId}
                  placeholder="아이디(이메일)"
                  onBlur={onClickIdDup}
                  data-testid="idInput"
                />

useCallback

23-04-18 수정
React가 의도한 useCallback의 올바른 사용법은 memo로 감싸진 컴포넌트에 props를 전달할 때 값이 변하지 않도록 해주는 것(useCallback)을 말한다.
따라서 만약 다시 코드를 작성해야한다면 useRef를 이용해서 input을 처리할 것이다.

useCallback은 중요하다.
이 useCallback을 언제, 왜 사용하는 지 알려면 우선 자바스크립트의 함수 동등성을 알아야한다.

> const add1 = () => x + y;
undefined
> const add2 = () => x + y;
undefined
> add1 === add2
false

자바스크립트에서는 함수도 객체로 취급이 되기 때문에 메모리 주소에 의한 참조 비교가 일어난다.
이러한 자바스크립트의 특성은 React 컴포넌트 함수 내에서 어떤 함수를 다른 함수의 인자로 넘기거나 자식 컴포넌트의 prop으로 넘길 때 예상치 못한 성능 문제로 이어질 수 있다.
예를 들어, 다음과 컴포넌트에서 API를 호출하는 코드는 fetchUser 함수가 변경될 때만 호출된다.
여기서 위에서 설명드린 자바스크립트가 함수의 동등성을 판단하는 방식 때문에 예상치 못한 무한 루프에 발생하게 된다.
fetchUser는 함수이기 때문에, userId 값이 바뀌든 말든 컴포넌트가 랜더링될 때 마다 새로운 참조값으로 변경이 된다.
그러면 useEffect() 함수가 호출되어 user 상태값이 바뀌고 그러면 다시 랜더링이 되고 그럼 또 다시 useEffect() 함수가 호출되는 악순환이 반복된다.

import React, { useState, useEffect } from "react";

function Profile({ userId }) {
  const [user, setUser] = useState(null);

  const fetchUser = () =>
    fetch(`https://your-api.com/users/${userId}`)
      .then((response) => response.json())
      .then(({ user }) => user);

  useEffect(() => {
    fetchUser().then((user) => setUser(user));
  }, [fetchUser]);

  // ...
}

이와 같은 상황에서 useCallback()hook 함수를 이용하면 컴포넌트가 다시 랜더링되더라도 fetchUser함수의 참조값을 동일하게 유지시킬 수 있다.
따라서 의도했던 대로, useEffect()에 넘어온 함수는 userId값이 변경되지 않는 한 재호출 되지 않게 된다.

import React, { useState, useEffect } from "react";

function Profile({ userId }) {
  const [user, setUser] = useState(null);

  const fetchUser = useCallback(
    () =>
      fetch(`https://your-api.com/users/${userId}`)
        .then((response) => response.json())
        .then(({ user }) => user),
    [userId]
  );

  useEffect(() => {
    fetchUser().then((user) => setUser(user));
  }, [fetchUser]);

  // ...
}

그럼 이제 궁금한 건 우리의 함수에 어떻게, 왜 적용했냐이다.
우리의 hook에는 의존성배열이 []인데, 이렇게 하면 최초 렌더링시에만 함수가 생성되고 이후에는 생성되지 않는다.
- 즉, 위에서의 함수 동등성에 의해 onChange 함수로 인해 input의 state가 변경되고 컴포넌트가 리렌더링 될 때 마다 onChangeId가 반응하고 원래는 재생성해야 하지만 (함수는 객체이므로 값이 변하면 내부가 변한다.) useCallback을 통해 재생성하지않고 따라서 리렌더링 하지도 않으며 따라서 불필요한 성능 낭비를 줄일 수 있게 된다.