[React] mbti 테스트 초기 상태 정리

지금은 mbti 테스트를 제공하는 사이트를 만들고 있다. 현재까지 진행상황을 정리하려고 한다.

 

1. 회원가입/로그인 구현

정상적으로 값들이 입력된 경우 회원가입/로그인 기능이 잘 구현되지만, 잘못된 경우 경고 문구를 띄우고 싶었다. 프로젝트에서 사용하는 서버에서 `axios`에러가 나면 에러 문구도 전달해주는 것으로 알고 있는데 전달이 안되는 어려움을 겪었다.

 

아래는 에러 문구가 전달되지 않는 초기 코드이다. (여기서 `api`는 `axios`를 이용한 커스텀 인스턴스이다.)

export const register = async (userData) => {
  try {
    const response = await api.post(`/register`, userData);
    return response.data;
  } catch (error) {
    return error;
  }
};

 

이렇게 하면 error는 전달되지만 문구는 전달되지 않았다. 튜터님의 도움으로 `isAxiosError`라는 메소드도 알게 되었고, error를 `console.log`로 확인해보니 잘 작동한 경우처럼 내용을 확인할 수 있었다. 따라서 아래와 같이 수정했다.

export const register = async (userData) => {
  try {
    const response = await api.post(`/register`, userData);
    let res = {
      rescode: response.status,
      resdesc: response.statusText,
      data: response.data,
    };
    return res;
  } catch (error) {
    let res = {
      rescode: error.response.status,
      resdesc: error.response.statusText,
      data: error.response.data,
    };
    return res;
  }
};

 

2. `zustand`로 로그인 정보 저장

이전에는 `redux toolkit(rtk)`나 `react`의 `Context API`를 사용해 전역상태를 관리했지만, 이번에는 `zustand`를 사용했다. `redux(toolkit)`이나 `Context API`와 달리 하나의 파일만 생성하고 별도 provider를 적용하지 않아도 돼서 편리하다.

 

이를 사용해 로그인 정보가 없는 경우 마이페이지에 접근할 수 없도록 설정할 수 있었다. 이때 `react`의 `Navigate` 컴포넌트를 사용할 수 있었다. 여기서 컴포넌트라는 단어에서 알 수 있듯이, 단순히 함수/조건문 내에서 페이지 이동할 때 사용하면 작동하지 않는다. 하나의 컴포넌트로서 작동하기 때문에 이를 고려해서 `useNavigate` hook와 번갈아가며 적절히 사용해야 한다.

// src/components/MyPage.jsx
...

const MyPage = () => {
  const {user} = useUserStore(state => state); // 로그인 정보 확인

  if (!user) { // 로그인 정보가 없으면 메인 페이지로 이동
    return <Navigate to='/'/>
  }
  
  ...
  
  return (
    {/*원래 마이 페이지 내용*/}
  )
}

 

3. `useRef`를 사용해 리렌더링 조절

이전에 정리한 글을 살펴보면 `useRef`는 `useState`와 다르게 컴포넌트를 리렌더링시키지 않는다. 따라서 불필요한 리렌더링을 줄이기 위해 `input`태그와 연결할 때 `onChange((e) => ref.current = e.target.value)`를 사용했다.

 

4. 내일 할 일

바로 이틀 후에 제출이므로 일정이 조금 빠듯하다. TanStack Query를 배웠지만 적용하지 못했기 때문에, 내일 다시 공부해서 적용해보려고 한다.