[react] 생명주기 메서드를 사용하여 사용자 인증 처리를 하려면 어떤 방식이 좋을까요?

22 Dec 2023

react

import React, { useState, useEffect } from 'react';

function App() {
  const [authenticated, setAuthenticated] = useState(false);

  useEffect(() => {
    // 여기서 인증 처리를 수행합니다. 
    // 예를 들어, 토큰이 유효한지 확인하거나 사용자 정보를 가져오는 API 호출 등을 수행할 수 있습니다.
    // 인증이 성공하면 setAuthenticated(true)를 호출하여 상태를 업데이트합니다.
  }, []);

  if (!authenticated) {
    // 인증되지 않은 사용자에 대한 처리
    // 예를 들어, 로그인 페이지로 리디렉션하거나 인증을 요청하는 UI를 표시합니다.
  }

  // 인증된 사용자에 대한 처리
  return (
    <div>
      <h1>인증된 사용자 화면</h1>
      {/* 내용 */}
    </div>
  );
}

export default App;

이 예시에서 useEffect hook을 사용하여 컴포넌트가 마운트될 때 한 번만 인증 처리를 수행합니다. 그 후에는 상태를 업데이트하여 컴포넌트가 다시 렌더링되어 적절한 화면을 보여줍니다.

기타 방법으로는 Redux나 context API를 사용하여 전역 상태를 관리하고, 해당 상태를 기반으로 컴포넌트를 조건부 렌더링하는 방법도 있습니다. 선택한 방법은 프로젝트의 요구사항과 구조에 따라 다를 수 있으므로 적합한 방법을 선택하시기 바랍니다.