230822) onClick 내부에서 useNavigate를 직접 호출해 사용할 경우 작동 되지 않는 현상

const navigate = useNavigate();
<button onClick={navigate("/signup")}>회원가입 하러 가기</button>

평소와 같이 코드를 작성하였는데 왜인지 버튼을 아무리 눌러도 회원가입 창으로 이동하지 않음을 발견하였다.

그래서 콘솔을 열어보니 버튼을 누를 때마다 아래와 같은 경고문이 발생하고 있었다.

 

"You should call navigate() in a React.useEffect(), not when your component is first rendered."

 

찾아 보니 이런 경우에는 onClick 내부에서 useNavigate 를 바로 호출하여 사용하지 않고, 함수를 onClick 내부에서 호출시켜 작동하게 만들거나, onClick 내부에 화살표 함수를 넣고, 실행부에 navigate를 적용시키면 되는 것 같았다.

 

직독직해하면 useEffect 내부에 useNavigate를 호출하라는 경고문이기에, useEffect내부에서 useNavigate를 호출해도 물론 해결은 되지만, 현재는 랜더링 여부에 따라 navigate가 되길 원하는 상황이라기보다는, 버튼을 클릭했을 시에만 다른 곳으로 이동이 되게 하려는 목적으로 useNavigate를 사용하는 상황이기에 이는 적절한 방법이 아니라고 생각하였다. 결론적으로 아래의 방법으로 코드를 수정했더니 더 이상 경고창이 뜨지 않고 버튼 클릭 시 useNavigate가 정상적으로 작동이 되었다.  

 <button onClick={() => navigate("/signup")}>회원가입 하러 가기</button>

(물론 위에서 언급했듯이 onClick 내부에서 navigate("/signup")의 동작을 하게 만드는 핸들러 함수를 호출해도 된다!)

 

 

---

 

 

오늘도 잘 해냈다!