개발자

react로 프론트 구현하고 있는데 로그인 여부에 따른 화면이 다를 때 백엔드에서 로그인 기능을 구현하지 않았어도 다른 화면을 보여주는 것을 구현할 수 있나요?

2024년 03월 13일•조회 171

현재 팀플을 하고 있는데 저는 프론트를 맡아 리액트로 작업 중입니다. 로그인을 하기 전과 한 후 화면에 보여지는 컴포넌트가 달라져야 하는데 이것을 백엔드에서 로그인 기능이 구현되지 않은 상태에서도 먼저 구현할 수가 있나요?

react

리액트

화면구현

프론트

로그인

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

비니 컴퓨터정보공학부 님의 질문

답변 1

실제 로그인에 쓸 api가 구현되지 않았다면 로컬 테스트용으로 임시 로그인 함수를 구현하고 그에 따라 ui가 변경되도록 만드시면 될 거 같습니다. 이를테면, 아래 코드와 같은 느낌으로 작성할 수 있습니다.

1cosnt SignInPage = ()=> {
2  const [hasAuth, setHasAuth] = useState(false)
3
4  const handleSignInClick = () => {
5    setHasAuth(true)
6 }
7
8 if (hasAuth) {
9    return <AuthPage />
10}
11
12  return <NoAuthPage />
13}

비니

작성자

컴퓨터정보공학부 • 2024년 03월 14일

감사합니다

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

이미 회원이신가요?

AI 답변

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 03월 13일

네, 가능합니다. 백엔드의 실제 로그인 기능이 구현되지 않았다 하더라도, 리액트에서는 조건부 렌더링을 통해 로그인 여부에 따른 다른 화면을 미리 구현할 수 있습니다. State나 Context API 등을 사용하여 사용자의 로그인 상태를 관리하고, 이 상태에 따라서 다르게 컴포넌트를 렌더링하도록 코드를 작성할 수 있습니다. 예를 들어 useState를 사용한 간단한 예시는 아래와 같습니다. ```jsx import React, { useState } from 'react'; import LoginPage from './LoginPage'; import MainPage from './MainPage'; function App() { const [isLogged, setIsLogged] = useState(false); return ( <div> {isLogged ? <MainPage /> : <LoginPage />} <button onClick={() => setIsLogged(!isLogged)}>로그인 상태 변경</button> </div> ); } export default App; ``` 위 코드에서는 isLogged라는 state가 true일 경우 MainPage 컴포넌트를 보여주고 false일 경우 LoginPage 컴포넌트를 보여줍니다. '로그인 상태 변경' 버튼 클릭시 isLogged의 값을 반대로 바꿔 로그인/비로그인 상황을 임의로 바꿀 수 있습니다. 물론 실제 프로젝트에서는 로그인 처리 로직은 백엔드와 연동되어야 하지만, 프론트엔드에서의 화면 전환 로직은 위와 같이 먼저 개발할 수 있습니다.

목록으로