🔑 인증 상태 전역 관리: useState를 활용한 간단한 상태 관리

애플리케이션에서 로그인 상태, 테마 설정, 장바구니 정보 등 여러 컴포넌트나 페이지에서 공유해야 하는 데이터는 전역 상태로 관리해야 합니다. Nuxt는 Vuex나 Pinia 같은 라이브러리 없이도 간단한 전역 상태 관리를 가능하게 하는 useState 컴포저블을 내장하고 있습니다.

이번 실습에서는 useState를 사용하여 로그인 상태를 전역적으로 관리하는 useAuth 컴포저블을 만들어 봅시다.

1. useState는 무엇인가?

useState는 Nuxt가 제공하는 훅(Hook)으로, 서버 및 클라이언트 환경 모두에서 데이터를 동기화할 수 있도록 설계된 반응형(Reactive) 상태를 생성합니다.

• 반응성 유지: ref()처럼 .value로 접근하며, 값이 변경되면 관련 UI가 업데이트됩니다.
• 전역 공유: 동일한 키(Key)를 사용하여 useState를 호출하면, 앱의 어느 곳에서든 동일한 상태 객체를 참조합니다.
• SSR 지원: 서버 사이드 렌더링(SSR) 시에도 상태가 Hydration되어 클라이언트 측과 일치합니다.

2. 👩‍💻 실습 1: useAuth 컴포저블 구현

인증 상태(isLoggedIn)를 저장하고 이를 변경하는 함수(login, logout)를 정의하는 컴포저블을 만듭니다.

2.1. 컴포저블 파일 생성

1. 프로젝트 루트의 composables 폴더 안에 useAuth.js 파일을 생성합니다.

   // composables/useAuth.js
   
   // 외부에 노출할 useAuth 함수를 정의합니다.
   export const useAuth = () => {
   
     // 1. 'isLoggedIn' 키를 가진 전역 상태를 정의합니다.
     // 두 번째 인자로 초기값 (여기서는 false)을 반환하는 팩토리 함수를 넣습니다.
     const isLoggedIn = useState('isLoggedIn', () => false) 
   
     // 2. 상태를 변경하는 함수 정의
     const login = () => {
       isLoggedIn.value = true
       console.log('로그인 상태 변경: True')
     }
     const logout = () => {
       isLoggedIn.value = false
       console.log('로그아웃 상태 변경: False')
     }
   
     // 3. 페이지에서 필요한 상태와 함수를 반환합니다.
     return {
       isLoggedIn,
       login,
       logout,
     }
   }
   

3. 실습 2: 로그인 페이지에서 상태 사용 및 변경

이제 pages/login.vue 파일을 만들어, useAuth 컴포저블을 사용하여 전역 상태를 표시하고 버튼 클릭으로 상태를 변경해 봅시다.

1. pages/login.vue 파일을 생성합니다.

   <template>
     <div>
       <AppHeader />
       <h1>로그인 상태 관리 테스트</h1>
   
       <p>현재 로그인 상태: <strong>{{ isLoggedIn ? '🟢 로그인됨' : '🔴 로그아웃됨' }}</strong></p>
   
       <button v-if="!isLoggedIn" @click="login" 
               style="padding: 10px; background-color: green; color: white; border: none; margin-right: 10px;">
         로그인 실행
       </button>
       <button v-else @click="logout" 
               style="padding: 10px; background-color: red; color: white; border: none;">
         로그아웃 실행
       </button>
     </div>
   </template>
   
   <script setup>
   // useAuth 컴포저블은 자동 임포트됩니다.
   const { isLoggedIn, login, logout } = useAuth()
   </script>
   

3.1. 결과 확인

http://localhost:3000/login 페이지에 접속하여:

1. "로그인 실행" 버튼을 누르면, "현재 로그인 상태" 텍스트가 "🟢 로그인됨"으로 즉시 변경됩니다.
2. "로그아웃 실행" 버튼을 누르면, 다시 "🔴 로그아웃됨"으로 변경됩니다.
3. 다른 페이지(예: /)로 이동했다가 /login으로 돌아와도 상태가 유지되는 것을 확인합니다.

핵심: 우리는 어떤 import 구문이나 복잡한 설정 없이 useState 하나만으로 애플리케이션 전반에 걸쳐 공유되는 상태를 만들고 조작하는 데 성공했습니다.

---

📝 블로그 마무리: 상태 관리의 기초

useState는 Nuxt에서 빠르고 간편하게 전역 상태를 관리할 수 있는 강력한 도구입니다. 복잡한 상태 관리 라이브러리를 도입하기 전에 이 방법을 활용하여 앱의 핵심 상태를 정의하는 것이 좋습니다.