동행큐브
676
2021-01-05 18:02:53
4
173

리액트에서 modal 호출 관련해서 질문드립니다.


axios 요청 보낼 때 에러를 catch 하면 modal 창을 띄우게 하고 싶어 만든 코드입니다. 다만 제가 리액트가 처음이다 보니 이것보다 더 좋은 방법을 찾지 못해 고민하고 있습니다. 


const axiosLib = (config, succHandler, errHandler) => {
/* config 데이터 형태
  config = {
    url:url,
    method:method,
    data:data
  }
*/
  axios(config)
    .then(response => {
      console.log(response.data.data);
      succHandler(response.data);
    })
    .catch(error => {
        if(errHandler !== undefined) {
          errHandler(error);
        }
    })
}

axiosLib.js입니다. 요청정보인 config와 성공시 실행할 익명함수, 실패 시 실행할 익명함수를 각각 succHandler, errHandler를 파라미터로 받습니다. 



const test = () => {
  const [alertInfo, setAlertInfo] = useState({})


  useEffect(() => {
    config = {
      url:'/users',
      method:'get'
    }
    axiosLib(config, (data) => {
      console.log(data)
    }, (err) => {
      setAlertInfo({
        show:true,
        title:'처리중 오류 발생',
        msg:err.msg
      })
    })
  }, [])

  return (
    <>
    <div>
      Hello World!
    </div>
      <CModal
      show={alertInfo.show}
      onClose={() => setAlertInfo({show:false})}
      >
        <CModalHeader>
          <CModalTitle>{alertInfo.title}</CModalTitle>
        </CModalHeader>

        <CModalBody>
          {alertInfo.msg}
        </CModalBody>
        <CModalFooter>
          <button onClick={() => setAlertInfo({show:false})}>닫기</button>
        </CModalFooter>
      </CModal>
    </>
  )

}

test.js입니다. CModal로 시작하는 요소는 제가 사용중인 템플릿 라이브러리 컴포넌트입니다. 

일단 이렇게 해서 뜨긴 합니다만 문제는 모든 페이지에서 CModal을 비롯한 여러 컴포넌트를 호출해야 한다는 점입니다. 따로 Alert 라는 이름으로도 빼놨지만 파라미터를 많이 주는 것은 별반 다르지 않았습니다. 

axiosLib 코드에서 띄워준다면 axios 요청을 보낼 때 에러가 발생할 때마다 modal을 보여줄 수 있을텐데 그렇게 할 수 있는 방법이 있을까요?


1
  • 답변 4

  • Frudy
    6k
    2021-01-05 19:51:34

    저도 동일한 고민을 했었습니다.


    이번주일요일까지 이 글에 답변달리는거보고

    그때도 답변이 없다면,


    제가 내린 결론을 정리해서 공유드리겠습니다.

    답변이있다면 저도 배우고싶네요 스크랩해둘게요.

  • 킁킁탐정
    657
    2021-01-05 19:51:40 작성 2021-01-05 19:58:46 수정됨

    react는 ErrorBoundary라는것으로 에러가 발생했을때 fallback할 방법을 지정할수 있습니다. 다음 사이트를 참고하시고 키워드로 검색해보시면 다양한 정보를 얻으실수 있습니다.

    https://reactjs.org/docs/error-boundaries.html


    * 참조할만한 기본 구현 라이브러리

    https://github.com/bvaughn/react-error-boundary

    * 실제로 에러를 Dialog로 표시해주는 예제

    https://github.com/RatneshChauhan/error-boundary-react

  • Frudy
    6k
    2021-01-05 20:02:46

    킁킁탐정


    클래스 컴포넌트는 lifecycle중에 componentDidCatch라는걸 지원하지만


    훅스는 예정에만 있고

    아직(17버전 현재기준) 구현되지않았다고 들었어요.


    그래서 고민중이었는데 공유해주신 링크 잘보겠습니다.

  • 동행큐브
    676
    2021-01-06 13:21:40

    감사합니다! 클래스 컴포넌트로 구현해서 성공했습니다!

  • 로그인을 하시면 답변을 등록할 수 있습니다.