공백 한 줄 생성했는데 dispatch가 다시 전송 되는 경우? (feat. useEffect, 버튼 이벤트, dispatch)

 

코드 없이 적어본다

 

코드가 있어야 설명할 수 있는거라면 내가 아직 이해를 못하고 있는 거라고 생각한다

 

제목에 있듯, 

특정 컴포넌트에서 스페이스 바를 눌러서 공백 한 줄만 추가했는데,

dispatch가 다시 날라가는 경우가 있다.

 

useEffect에 dispatch를 넣어줬기 때문이다. useEffect에 인수를 지정하지 않았기 때문이다.

리액트의 특성을 몰랐기 때문이다.

 

이 상황이, 쇼핑몰 앱을 구현하는 과정에서 장바구니 컴포넌트에서 발생을 했었다.

 

상품 상세 페이지에서 수량을 체크하고 '담기'를 누르면 장바구니 페이지로 이동함과 동시에, 유저가 담으려 했던 아이템과 수량과 금액이 장바구니 페이지에 나와야 한다.

 

'다른 건 별 문제가 없었기 때문에',

 

정상적으로 찍혀져 나왔다.

 

 

아니었다. 별 문제가 많았다.

첫째로, dispatch를 장바구니 페이지에서 실행을 했다는 점.

둘쨰로, 첫째 이유와 동시에, 해당 dispatch를 useEffect의 빈 인수 안에다가 넣어서 계속 리렌더링이 됐다는 점.

 

위 2가지 이유가 어떠한 결과를 초래하냐면, 

장바구니 페이지에서 공백 한 줄만 추가하더라도, 유저가 담으려 했던 최초의 아이템이 '또' 담기는 현상이 발생한다.

 

이를 해결하기 위해 내가 했던 방법은

1. dispatch를 상품 상세 페이지로 옮긴다

2. 유저가 '담기'버튼을 클릭해야, dispatch가 실행되는 것이 맞으니까, 버튼 이벤트에 dispatch를 추가한다.

 

 

내가 원하는 값이 나왔다.

단 2줄의 해결책으로 앱이 정상적으로 돌아왔다. 

코딩이 힘든 이유가 단 2줄을 생각하기까지 시간과 노력을 쏟아부어야 하기 때문이라고 생각한다. 

그러는 와중에 배우는 것들이 재미가 있고 한 발자국 나아갈때마다 ㅋㅋㅋㅋㅋㅋ즐거움을 느낀다고 하면 미친놈일까 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ뭐랄까 시간이 지날수록 뭔가 해결책이 손에 잡힐듯 말듯 하는 그런 느낌이 온다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ지쳐야 하는데 이상하게 더 스퍼트가 땡겨지는 그런 느낌적인느낌ㅋㅋㅋ

 

이번 프로젝트를 통해 리액트의 원리를 이론이 아닌, 정말 실전에서 배우고 있다는 느낌이 든다. ㅎㅎ