[같공] (해결) 로그인 시 방페이지로 이동 기능

로그인 버튼을 누르고 로그인이 성공할 시 자동으로 room 홈페이지로 넘어가게 구현하기

처음에는 삼항연산자를 이용하여 isLogin 상태이면 room으로 이동하게 Link를 사용해보았다

<div>
  {isLogin ? <Link to="/room"  /> : <></>}
</div>

---

그런데 작동하지 않아 useNavigate 를 사용해보았다

const navigate = useNavigate()

로그인 버튼 클릭

const signIn = () => {
    // signUpAPI 실행
    signInAPI(userid, password)
    .then((response) => {
      if (response !== '') {
        setToken(response);
        setUserid('');
        setPassword('');
        navigate('/room');
      }
      else {
        alert('로그인 실패!!!');
        setUserid('');
        setPassword('');
      }
    })
  }

<button onClick={signIn}>로그인</button>

💡 response 값이 존재한다면 /room 으로 이동

⚠️ response !== NULL 이 아닌 response !== '' 이다
'' -> 존재하지 않는다
NULL -> 값이 널이다

---

⌨️ 전체 코드

function SignInPage({token, setToken}) {
  
  const [userid, setUserid] = useState('');
  const [password, setPassword] = useState('');

  const navigate = useNavigate()

  const useridHandler = (e) => {
    setUserid(e.target.value);
  };
  const passwordHandler = (e) => {
    setPassword(e.target.value);
  };

  // 로그인 버튼 클릭
  const signIn = () => {
    // signUpAPI 실행
    signInAPI(userid, password)
    .then((response) => {
      if (response !== '') {
        setToken(response);
        setUserid('');
        setPassword('');
        navigate('/room');
      }
      else {
        alert('로그인 실패!!!');
        setUserid('');
        setPassword('');
      }
    })
  }

  //로그인 상태 관리
  const [isLogin, setIsLogin] = useState(false);
  useEffect(() => {
  if(token === ''){
      console.log('로그인 후 사용가능합니다.');
  }
  else{
      setIsLogin(true);
      console.log('로그인 상태');
  }
    }, [token]);

  return (
    <div className="PageContainer">
      <h1>SignInPage입니다.</h1>
      <div>
        <input
          name="userid"
          type="text"
          placeholder="userid"
          value={userid}
          onChange={useridHandler}
        />
      </div>
      <div>
        <input
          name="password"
          type="password"
          placeholder="password"
          value={password}
          onChange={passwordHandler}
        />
      </div>
      <div>
        <button className="signInButton" onClick={signIn}>
          로그인
        </button>
      </div>
    </div>
  );
}

export default SignInPage;