인프런 커뮤니티 질문&답변

사실 복잡하지 않으면 useEffect에서 해도 되는데요. delay같은 것은 setTimeout에 promise를 추가한 것입니다. useEffect에서 한 번 saga 없이 구현해보시는 것도 괜찮습니다.

감사합니다 ㅎㅎ 제로초님 그럼 한가지 더 궁금한 것이 있는데 

delay같은 것들은 직접 연결 해줬을때 settimeout으로 대체 해줘도 되는데 혹시 문제 되는 부분들이 있나요?

제가 아직 그런 경우들을 잘 안겪어봐서 useEffect에서 직접구현할때 힘든 점이 있을 까 해서요 

useEffect에서 비동기 통신을 한다고 해서 꼭 해제할 필요는 없습니다. 이벤트리스너를 해제합니다. 파이어배이스는 이벤트리스너같이 동작해서 해제하는 것입니다.

saga를 쓰는 이유는 비동기 로직을 컴포넌트로부터 분리하기 위함입니다. 로직 분리가 주목적이고 거기에 편의성 기능을 다양하게 사용할 수 있습니다. delay cancel throttle같은 것들요. takeLatest도 있고요. useEffect에서 직접구현하려면 골때립니다.

제로초님 이론 적으로 궁금한게 한가지 있는데

직접적으로  useEffect를 사용하여 axios로 비동기 처리를 해줄 수도 있는데 

강의에서 들을 때 저희는 useEffect에서 비동기를 직접 처리해주기 보다는 SaGa를 통해서 처리를 해주 잖아요?

그런데 위와 같이 useEffect에서 직접적으로 비동기 통신을 하게 되면은 유튜브에 있는 기초강의에서도 그랬듯이 메모리 누수를 위해 componentWillUnmount를  사용해 줘야 메모리 누수를 막을 수 있다고 공부를 했습니다.

그런 이유 때문에 직접적으로 useEffect에서 직접적으로 비동기 통신을 사용 하게 되면 일일이 컴포넌트당 useEffect를 이용하여 비동기 통신을 해 줄때마다 componentWillUnmount를 해서 메모리 누수를 해줘야 하는 번거로움이 있으니

redux와 redux의 미들웨어들인 덩크나 사가를 사용 하여 직접적으로 접근을 안해도 되고 useEffect에서는 dispatch로 액션을 요쳥만 하면 되니 componentWillUnmount를 해줘도 되지 않고 액션을 받은 비동기 처리 는 사가에서 하게 되고 액션에서 나온 값은 또 redux에서 state에서 관리를 하기 때문에 메모리 누수 까지 생각을 안해줘도 되는 편리 함 때문에 

useEffect에서 직접적으로 통신을 할 수는 있지만 직접적으로 하는 것 보다 redux와 saga를 사용 해야 하는  이유가 되는게 맞을까요?

주변에서 이제 막 리액트를 시작 하는 사람들이 저한테 물을 때  useEffect에서 직접적으로 비동기 통신을 할 수 있는데 redux에서 state를 관리 해주는 편리 함이 있지만 이걸 왜 스토어 까지 만들어 사가랑 리덕스를 써야 하냐 라고 했을 때 장점을 크게 말을 해주지 못했거근요...

이번에 이런 이슈가 직접적으로 생겨서 왜 사가랑 redux를 사용 해야 하는 이유가 머리 속에 정립이 되는 것 같은데 혹시 제가 생각 하는 그런 부분 들이 맞을까요?

그리고 직접적으로 통신 하는것 보다 리덕스와 사가를 쓰는 좋은 점이 혹시 더 있으면 말씀해주시면 감사하겠습니다!

firebase db collection 관련해서 메모리 정리해주는 메서드가 있을 것 같습니다. 제가 firebase는 모르지만 clearTimeout같은 정리 메서드가 있을 거에요. useEffect의 return에 넣으시면 됩니다.