inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Tạo NodeBird SNS bằng React

제로초님

344

lomangim1230708

62 câu hỏi đã được viết

0

질문이 있습니다

제로초님 혹시 useEffect쓰실때 

메모리 누수 관련해서 에러 해결 해 보신 경험 있으신가요? ㅠㅠ

로그인을 하거나 로그아웃을 했을 때 useHistory로 메인 페이지로 다시 돌아와서 useEffect를 하여 데이터를 가져 올때 메모리 누수 에러가 나더라구여 ㅠㅠ

javascript react

Câu trả lời 5

0

zerocho

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

0

lomangim1230708

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

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

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

0

zerocho

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

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

0

lomangim1230708

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

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

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

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

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

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

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

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

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

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

 

0

zerocho

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

next 10 이상에서는 redux dev tool 구동이 안되나요?

0

269

1

세션 갱신 문의 건

0

474

7

배포 진행 후 Highlight updates components render 표시

0

444

1

똑같은 기능을 하는 테이블

0

446

4

관계형

0

310

2

프론트 서버를 이용하지 않는경우

1

294

3

인피니트 스크롤링 사용시 오류

0

277

0

계속 이런에러가 떠서 해결하기는 했는데 어떤 의미인지 모르겠습니다.

0

430

2

req.user가 언제 생성되나요??

0

327

2

Cannot read property 'id' of null 에러

0

330

1

리트윗한 게시글 불러오는 sequelize

0

251

1

result.data에서 images인 이유

0

278

2

takeLatest에 대한 질문입니다.

1

339

2

프론트에서 express를 사용하지 않을때 동적라우팅

0

493

6

getInitialProps가 클라이언트에서 수행되는 이유?

0

256

1

리로드하면 팔로우 언팔로우 값이 초기화 되는 문제입니다.

0

443

2

스타일드 컴포넌트와 className을 통한 스타일 적용의 차이에 대해 궁금합니다

0

585

2

할인 쿠폰 사용이 안되는되요 (848-f9af83f183e3)

0

363

1

nodejs mvc 패턴

0

975

4

사용하고 보니, 람다 구성이 궁금합니다!

0

264

1

제로초님

0

442

1

새로고침 로그인 풀림 문제.

0

246

1

안녕하세요. 강의 너무 감사합니다

0

155

1

제로초님

0

169

1