리액트 조건부 라우팅 방법

리액트에서 로그인 폼을 만들어 보는 예제를 진행 중에

로그인 버튼을 눌렀을 때 조건에 따라 로그인이 되고, 조건이 맞지 않으면 화면이 넘어가지 않도록 구현하기 위해

삽질을 잠깐 해보다가 무언가 단순한 걸 놓치고 있다는 생각이 들어서 공식문서를 참조했습니다.

 

우선 리액트에서 자주하는 삽질 중 하나이자 꼭 기억해야 할 내용으로

Form을 다룰 때 반드시 e.prevendefault를 활용해야 한다는 것입니다.

이를 설정해두지 않으면 자동으로 렌더링을 하기 때문에 조건을 걸어도 막을 수가 없습니다.

예를 들면

if (username === "admin" && password === "1234") {
    } else {
      e.preventDefault();
    }

위와 같은 상황을 같이 보실 경우,

username이 admin이고 password가 1234일 경우에만 Link 라우터가 작동하도록 설정하는 과정입니다.

그 밖에는

e.preventDefault(); 를 사용해 화면이 넘어가는 것을 방지하셔야 클릭 시 화면이동을 방지할 수가 있습니다.

 

화면 하단 부에는 button 태그를 Link로 감싼 후 Link에다가 onClick 이벤트를 걸어서

handleClick이라는 함수를 만들어 주었습니다.

위 코드블럭은 handleClick의 내용이었습니다.

제 공부를 위해서 정리하는 내용이 좀 두서없게 느껴질 수 있사오니

혹 궁금하신 점이 있으신 분들은 댓글 남겨주시면 같이 지식을 공유할 수 있도록 하겠습니다.

 

감사합니다