공통 프로젝트중 React, Redux 사용중이다.
우리는 로그인한 사용자만 서비스를 이용할 수 있도록 웹을 만들고있다.
로그인하면 로컬스토리지에 유저id(번호), token값을 저장해놓고 사용한다.
근데 redux를 이용해 보고싶어서 로그인하면 user슬라이스에 id값과 토큰값을 또 저장해놓는다.
App이 새로고침 될때마다 user정보를 잃어버리지 않기 위해 axios를 쏴서 redux에 다시한번 저장시킨다.
다른 컴포넌트에서도 userId 값이 많이 필요하기 때문에 자주 불러와서 쓰는데
이게 useEffect 를 사용할때 문제가 생긴다.
useEffect는 렌더링 되기전에 작업을 한번 수행하게 하고, watch값을 지정해줄 수도있는 react hook중 하나인데,
특정 페이지에 들어갈때 axios로 데이터를 요청해야 할 경우 많이 사용한다.
api요청을 보낼때 userId가 필요한 경우가 많은데 redux에 저장해 놓은 id값을 useSelector 훅을 이용해서 불러오고
그걸 useEffect안에서 사용하려고 하면
id값을 불러오기도 전에 useEffect에서 먼저 사용해 버려서 오류가 뜬다.
그래서 useEffect 안에서 userId값을 정의하려고 useSelector 를 사용하면
ReactHooks 안에서는 또다른 ReactHook을 사용할 수 없다고 또 에러가뜬다
그럼 어떻게 axios요청을 하라는거지??
댓글