TIL-24.05.16

 

문제점

axios interceptors를 사용하면서 발생한 문제. 어떻게 보면 중요할수도 있는 개념..

어제에 이어 interceptors를 사용해 에러핸들링 구간을 작성하고있었다. 예를 들어 에러 발생 시 특정 컴포넌트로 리다이렉트 시켜줘야 하는 경우가 있었다. 리다이렉트 시키기 위해 useNavigate() 훅을 사용했고, 아무런 의심없이 당연히 될거라는 생각에 두고있었는데 실제로 해당 에러가 발생했고, 내가 원했던 리다이렉트는 진행되지않았다.

내가 대신 얻었던 것은 콘솔 창에 떠있는 Hooks can only be called inside of the body of a function component.

리액트 프로젝트 내에서는 당연히 Hook을 사용할수있는게 아닌가? 라는 생각이었던 나는 이해가 할수없던 에러 메시지였고 이를 해결하기 위해 자료들을 찾았다.

 

 

 

시도한점

이제야 이 사실을 알게된 내가 조금 부끄럽지만, 긍정적인 방향으로 이제라도 알게 되었으니 다행이다 라고 생각하려한다.

React Hooks를 사용하는데는 규칙이 있다.

크게 2가지가 있는데, 첫째 최상위에서만 Hooks를 호출해야한다. (예를 들어 반복문 내부, 조건문 내부는 호출할수없다.)

두번째, Hook는 리액트함수 내에서만 호출해야한다. (즉, 함수형 컴포넌트)

이말은 즉, 일반적인 JS함수 내부에서는 Hook를 호출할수 없다는 뜻

axios interceptors를 작성해놓은 파일은 일반적인 js 함수 파일이였고, 통신 요청이 필요할때에만 꺼내쓰는 곳이였기에 컴포넌트가 아니였다. 따라서 리다이렉트는 에러발생 해당 컴포넌트에서 시켜줬고, axios interceptors 파일은 프로미스 리젝트만 반환해주니 내가 원했던 방향으로 에러핸들링이 정상적으로 되었다.

리액트를 하면서 가장 많이 쓰고있는 Hook들에 대한 기본 규칙들에 대해 잘 모르고 있던 내 자신에 반성한다.

 

 

 

 

알게된점

Hook는 일반적인 js함수가 아니다

사용하려면 리액트 함수내에서 사용해야한다