slack 클론코딩) useCallback, 비밀번호 일치처리

useCallback의 적절한 사용법

useCallback : 메모이제이션된 콜백을 반환하는 React의 Hook

컴포넌트가 렌더링 될 때 내부의 함수도 다시 그려지게 되는데, 함수가 많을 경우 메모리에 부담이 생길 수도 있다. 최적화를 위해 사용하는 방법 중 하나가 바로 useCallback이다.

파이널프로젝트를 할 때 커스텀훅에 useCallback을 사용하긴 했는데, 강의를 보니 모든 함수를 다 useCallback으로 만들어주면 좋다는 생각이 들었다.

const passwordCheck = useCallback((e) => {
	if(e.target.value !== password) {
    	setError(true);
    }
}, [password])

useCallback은 위처럼 함수를 감싸서 사용하며, 안에 있는 함수를 메모이제이션해 반환한다. 뒤에 있는 의존성 배열에는 useCallback에서 참조하는 외부 변수를 넣어주어야 한다. 의존성 배열을 넣어 주어야 해당 값을 최신의 값으로 유지할 수 있다.
setError를 의존성배열에 넣지 않는 이유는 공식문서에도 나와있는데,

주의
React는 setState 함수 동일성이 안정적이고 리렌더링 시에도 변경되지 않을 것이라는 것을 보장합니다. 이것이 useEffect나 useCallback 의존성 목록에 이 함수를 포함하지 않아도 무방한 이유입니다.

라고 찾아볼 수 있다. 즉 setState 함수는 임의로 변하지 않는다는 것이 보장되어 있기 때문에, 의존성배열에 넣어주지 않아도 된다.

비밀번호 확인 기능구현

password와 passwordCheck 상태를 useState로 관리해주고, handleChange함수를 만들고 일치하지 않을 경우 에러를 설정해주면 된다.

const [password, setPassword] = useState("");
const [passwordCheck, setPasswordCheck] = useState("");
const [mismatchError, setMismatchError] = useState(false);

const onChangePassword = useCallback((e) => {
	setPassword(e.target.value);
  	setMismatchError(e.target.value !== passwordCheck);
}, [passwordCheck]);

const onChangePasswordCheck = useCallback((e) => {
	setPasswordCheck(e.target.value);
  	setMismatchError(e.target.value !== password);
}, [password]);


return 
.
.
.
{mismatchError && <Error>비밀번호가 일치하지 않습니다.</Error>}
.
.

true, false를 설정할 때 위처럼 넣어주면 코드가 한결 깔끔한 것 같아서 기록해놓았다! mismatchError라고 변수명을 만들어준 것도 참고하면 좋을 것 같다.