[ReactJS/AXIOS] 백엔드 없이 로그인 구현하기 (2)_DELETE

 

지난시간에 구현했던 LogIn.js 컴포넌트에서 로그인이 되면 setLogIn(true)가 되도록 하였는데,

결국 true 값을 home, header 등으로 보내야하기 때문에 App.js를 기준으로 props를 전달하기로 했다. 

 

function App() {
  return (
    <div className="App">
      <Header/>
      <div className='content_wrap'>
        <Routes>
          <Route path='/' element={<Home/>} />
          <Route path='/login' element={<LogIn/>} />
          <Route path='/signup' element={<SignUp/>} />
        </Routes>
      </div>
    </div>
  );
}

기존에 구현했던 코드에서 LogIn 컴포넌트에서 데이터를 받아야하고, 

Home, Header에 데이터를 보내야 한다.

 

 

이럴때 가장 쓰기 좋은 방법은 App.js에서 useState를 만들어 데이터를 보내고 받는 방법이다.

  const [LogInCheck, setLogInCheck] = useState(false); //초깃값 false 
  function LogInFunc(state){
    setLogInCheck(state)
  } 
  return (
    <div className="App">
      <Header LogInCheck={LogInCheck}/> // true || false 값 보내기
      <div className='content_wrap'>
        <Routes>
          <Route path='/' element={<Home LogInCheck={LogInCheck}/>} /> // true || false 값 보내기
          <Route path='/login' element={<LogIn LogInFunc={LogInFunc}/>} /> //함수 보내기
          <Route path='/signup' element={<SignUp/>} />
        </Routes>
      </div>
    </div>
  );
}

 

 

 

 

이제 LogIn.js에서 true || false를 받아온다.

export default function LogIn({LogInFunc}){ //props로 함수 받아오기 
	(...)
function onSubmit(){
        axios.post('http://localhost:3001/members',{ id,  pw})
        .then((res)=>{ 
            const result = item.data.find((item)=> item.memId === id && item.memPw === pw);
            
            if(result){ 
                navigate('/')
                LogInFunc(true); //로그인되면 true 보내기 
            }else{
                alert("아이디 혹은 비밀번호가 일치하지 않습니다.")
                LogInFunc(false); //로그인되면 false 보내기 
            }
        }) 
        .catch((err) => {
            console.error('에러 발생:', err);
          });
    }

 

 

Header에서 삼항연산자를 이용하여 LogInCheck 값에 따라  Log In | Sign Up 과 Log Out | My Page로 바꿔준다. 

export default function Header({LogInCheck, LogInFunc}){ //true || false 값 받기 & 로그아웃 데이터 보내기

    function LogOut(){
        LogInFunc(false); //로그아웃(false)
    }
    return(
        <header className="header" style={{backgroundImage: 'url(' + process.env.PUBLIC_URL + '/assets/header_visual.jpg)' }}> 
            <h1><Link to={"/"}>Review Note</Link></h1> 
                {LogInCheck ? (
                    <ul>
                        <li><Link  to="/login" onClick={LogOut}>Log Out</Link></li>
                        <li>|</li>
                        <li><Link  to="/signup">My Page</Link></li>
                    </ul>
                    ):(
                    <ul>
                        <li><Link to="/login">Log In</Link></li>
                        <li>|</li>
                        <li><Link to="/signup">Sign Up</Link></li>
                    </ul>
                 )}  
        </header>
    )
}

🔗 주의할 점
1. html 코드는 괄호로 묶는다.
2. 괄호 안에는 <ul></ul> 코드까지 포함시킨다.

 

이 상태로 로그인을 성공하게되면 Header.js로 true 값을 전달하면서 Home으로 이동하고 gnb 버튼이 바뀐다.

로그아웃을 누르면 App.js로 LogInCheck 값으로 false를 보내고 로그인페이지로 다시 이동한다.

로그아웃 상태

로그인 상태

 

 

 

 

이제 여기서 문제는 나는 json 파일을 이용하여 데이터 서버를 만들었고,

로그인을 할 때 POST를 이용하다보니 로그인을 할 때마다 id, pw 값을 보내서 members 데이터에 id, pw 값들이 계속해서 쌓였다. 

 

주변에 백엔드 개발자 말로는 데이터는 보통 DB서버로 보내다보니 실무에선 데이터가 쌓이기보단 로그가 계속해서 남는다고 한다.

 

나는 json 파일 가독성을 위해 로그인 성공, 실패에 상관없이 보낸 데이터는 DELETE 해주겠다.

axios.delete(url)

DELETE는 해당 데이터만 삭제하면 되기 때문에 url까지만 적어도 괜찮다.

 

보통 데이터를 POST하면 홍길동의 "id" : "bdda" 처럼  id 값이 자동으로 지정되며 

특정 데이터를 찾으려면 아래처럼 데이터 경로에서 /{id} 값을 적으면 된다.

 

 

나는 아이디 칸에 적은 데이터의 이름을 똑같이 id라고 지정했기 때문에 url에 그대로 id를 사용하면 된다.

    function onSubmit(){
        axios.post('http://localhost:3001/members',{id, pw})
        .then((res)=>{ 
            const result = item.data.find((item)=> item.memId === id && item.memPw === pw);
            
            if(result){ 
                navigate('/')
                LogInFunc(true); 
            }else{
                alert("아이디 혹은 비밀번호가 일치하지 않습니다.");
                LogInFunc(false); 
            }
            axios.delete(`http://localhost:3001/members/${id}`);
        }) 
        .catch((err) => {
            console.error('에러 발생:', err);
          });
    }

 

이러면 로그인 성공 혹은 실패 시 불필요하게 id , pw 값이 쌓이지 않는다. 

 

 

---

이제 로그아웃이 된 상태에서 리뷰를 쓰려고하면 알럿창이 뜨면서 로그인 페이지로 돌아가도록 해보자.

마찬가지로 LogInCheck 값을 비교하고 false라면 로그아웃 상태이기 때문에 Log In 페이지로 돌려보내면 된다.

import { useNavigate } from "react-router-dom"
 
export default function ReviewPost({LogInCheck}){
    const navigate = useNavigate(null);
    function handleOnClickCheck(){
        if(!LogInCheck){
            alert("로그인이 필요합니다.")
            navigate('/login')
        }
    }
    return(
        <div className="reviewPost">
                    <h2>리뷰 작성하기</h2>
                    <textarea onClick={handleOnClickCheck}  maxlength="300" placeholder="리뷰를 입력해주세요."  type="text" />
                    <button>등록</button>
         </div>
    )
}

알럿창이 뜬 후 로그인 페이지로 이동함

 

 

 

반대로 로그인 상태라면 아무 알럿창도 뜨지 않고 리뷰를 입력할 수 있다. 

 

그럼 다음시간엔 리뷰를 등록하면 실제로 리스트에 추가되고, 마이페이지에서 내 정보를 확인할 수 있도록 해보자.