지금 작성자분께서 작성해주신 코드는 useLogOut라는 "단순 함수"를 만드셔서 사용하려고 하신 것 같아요. 커스텀 훅이라는 것은 어려운 게 아니라 단순히 생각하면 사실 "함수와 변수를 뱉어내는 함수"에요. 커스텀 훅의 메인 컨셉은 "UI와 로직을 분리"가 목적이기 때문에 UI에 대한 코드 작성은 component에서 진행하고, 작성자분께서 올려주신 로그아웃, 로그인 같은 로직들은 커스텀 훅에서 처리를 하는거죠. 제가 보내드린 이미지에 코드들을 잘 보시면 useLogout 함수는 객체형태로 return을 하고있죠? 그 안에 로그아웃 함수가 담겨져 있는 것을 볼 수 있어요. 그럼 컴포넌트에서 useLogout() 이렇게 호출을 하게 된다면 logout 함수가 담겨져 있는 객체를 받게 되겠죠. 그럼 그대로 꺼내서 쓸 수 있는거에요. logout이 어떤 일을 하는지는 컴포넌트에서 자세히 알 필요없고 그 자세한 내용은 useLogout 커스텀 훅 안에서 다 처리를 하는거죠. 지금 보시면 localstorage를 지우고 몇 가지 동작을 더 하는 것을 컴포넌트 안에서는 알 필요가 없죠? 그냥 단순히 "logout" 이라는 함수로 추상화해서 쓰는 것 뿐이죠. 이런식으로 커스텀 훅을 사용할 수 있어요. 그럼 조금 더 나아가면 useLogout 훅이 아니라 유저 인증에 대한 전반적인 로직을 처리한다고 하면 이름을 useAuth 라고 짓고 그 안에 logout, login과 같은 함수를 만들어서 여러 컴포넌트에 재사용할 수 있게 만들 수도 있겠죠.

다음 내용이 궁금하다면?

지금 간편 가입하고 다음 내용을 확인해 보세요!

또는

이미 회원이신가요?

2023년 1월 15일 오후 1:37

댓글 0