📜 authentication 회고록

회고록같은 것을 써보겠다고 생각이 든적이 없지만 처음으로 한번 써보고자한다.

이유는 어떠한 한 문제에 대해서 깊이 생각하며 해결하려했던 과정들을 기록해두고싶어서이다.
(얼핏보면 별 것이 아닌 문제이지만 하루를 거의 다 바쳐썼음)

문제가 발생했던 상황은 다음과 같았다.

react-router를 공부하면서 공식홈페이지에 예제들을 공부하려했다.
react router의 공식홈페이지의 Auth Example인데 이는 내가 공부하지않은 타입스크립트 내용이 섞여있어 공부하기 어려울 것 같다는 판단이 들었다.

나는 react router version 6를 공부하는 중이었기에 v6으로 authentication를 구현한 예제를 찾고 싶었다.

여기저기 찾아보다 version6 authentication을 찾게 되어 보면서 공부하였다.

하지만 진행하면서 문제점이 하나 생겼다.
문제는 다음과 같았다.

useAuth.js

function useAuth() {
  const [authed, setAuthed] = React.useState(false);

  return {
    authed,
    login() {
      return new Promise((res) => {
        setAuthed(true);
        res();
      });
    },
    logout() {
      return new Promise((res) => {
        setAuthed(false);
        res();
      });
    },
  };
}

export function AuthProvider({ children }) {
  const auth = useAuth();

  return <authContext.Provider value={auth}>{children}</authContext.Provider>;
}

export default function AuthConsumer() {
  return React.useContext(authContext);
}

Login.js

import { useNavigate } from "react-router-dom";
import useAuth from "./useAuth";

function Nav() {
  const { authed, logout } = useAuth();
  const navigate = useNavigate();

  const handleLogout = () => {
    logout();
    navigate("/");
  };

  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/pricing">Pricing</Link>
        </li>
      </ul>
      {authed && <button onClick={handleLogout}>Logout</button>}
    </nav>
  );
}

useAuth는 사용자가 인증상태,로그인,로그아웃 기능을 내재한 함수인데 이를 여러 컴포넌트에서 사용하려는 의도이다.

하지만 내가 코드를 따라서 구현하였을 때 실행되지 않았다.

이 문제점에 대하여 나는 2가지 의문점을 가졌다.
1. useAuth라는 함수를 export하지않는데 어떻게 다른 컴포넌트에서 useAuth를 가져다쓸 수 있는것인가?
2. export default function useAuth를 하였다하더라도 모듈마다의 스코프가 있기때문에 컴포넌트마다 해당값이 다를텐데 어떻게 전역적으로 쓸 수 있는것인가?

1번 의문점에 대하여 답을 찾지못해 2번과 같이 변경하였는데 이조차도 해결할 수 없었다.

useAuth가 반환하는 값을 전역적으로 사용하는법이 떠오르지 않았다.
그리하여 useAuth값을 전역적으로 쓰기 위해 현재 내가 아는 방법이 무엇이 있을까라고 고민하다가 다음과 같이 해결했다.

최상단 컴포넌트(App)에서 useAuth함수를 정의하여 반환값들을 prop drilling(하위 컴포넌트의 prop으로 내려주기)하였다.

이것이 적절한 방법인지 모르겠지만 문제를 일단 해결했다는 것에 대해 기뻤다.

어쨋든 지금도 의문점이 있는 코드이지만 꾸준히 리팩토링하며 무엇이 더 효율적인 코드인지 확인하며 본 예제에서는 왜 저렇게 사용할 수 있었는지 고민해봐야겠다.

작은 문제였지만 오랜 시간 공들여서 해결했다는것이 뭔가 뿌듯하다.