리액트,node.js로 회원가입 구현

[현정]

리액트에 회원가입 폼을 만들었고 axios 로 post요청을 통해
node.js에서 mongodb로 회원정보를 저장하게 만들었는데 
그다음을 어떻게 만들어야 할지 모르겠어요
회원가입 완료 시에는 로그인 페이지로 이동하고,
이미 있는 id일시 존재하는 아이디 라는 팝업을 띄우고 싶은데
이걸 react에서 어떻게 구현해야하나요?
axios요청부분에서 res에서 id가 있을경우 모달창 띄우고
회원가입 성공했으면 rediret하도록 만들수있나요?

<Register.js>

import React,{useState} from 'react';
import axios from 'axios'
export default function Register(){
    const [id,setId] = useState('');
    const [pw,setPw] = useState('');
    const [modal,setModal] = useState(false)
    const [already,setAlready] = useState(false)

    const handleId = (e) => {
        setId(e.target.value)
    }
    const handlePw = (e) => {
        setPw(e.target.value)
    }
    
    const register = async() => {
        let body = {
            id: id,
            pw: pw
        }
        try {
            const res = await axios.post('/naver/register',body)
           if ( res.data == id){
                setAlready(true)
                console.log(res);
            } else{
                setModal(true)
            } 
이부분에서 어떻게 해야될지 모르겠어요ㅠ 중복검사가 안되고 무조건 회원가입이
완료되었다고만 나와서
        }catch(error){
            console.log(error);
        }
    }
    const onSubmitHandler = async(e) => {
        e.preventDefault();
    }
    return (
        <div>
        <form onSubmit={onSubmitHandler}>
            <div class="form-group">
                <label>아이디</label>
                <input type="text" class="form-control" name="id" onChange={handleId}/>
            </div>
            <div class="form-group">
                <label>비번</label>
                <input type="text" class="form-control" name="pw" onChange={handlePw}/>
            </div>
            <button class="btn btn-danger" type='submit' onClick={register}>회원가입</button>
            </form>
            {
                modal == true ? <Modal/> : null
            }
            {
                already == true ? <Already/> : null
            }
        </div>
        // 회원가입 완료 후 완료페이지 렌더링,메인 화면 돌아가기
       // 이미 있는 id일시 존재하는 아이디 라는 팝업 띄우기
    )
}
<server.js>
app.get('/naver/register', function(req,res){
  res.send('registerpage')
})
app.post('/naver/register', function(req,res){
  const {id,pw} = req.body;
  db.collection('user').findOne({id:id}, function(err,result){
    if(result == null){
      db.collection('user').insertOne({id:id, pw:pw}, function(err,result){
        console.log(result);
        res.redirect('/login')
      })
    } else {
      res.send('이미 존재하는 아이디 입니다.')
    }
  })
})

[codingapple]

ajax로 요청하면 res.redirect 이런건 동작안해서 
서버에서는 성공/실패 메세지만 보내주고 리액트에선 ajax성공이나 실패도착시 url 이동시켜주면 됩니다

[글쓴이]

글