[react] useEffect의 return이 정상적으로 실행되지 않던 문제

회사에서 진행하는 프로젝트가 출시 마무리 단계여서 앱 테스트 도중 아래와 같은 에러가 발생했다.

 

현재 카테고리(과자.초콜릿.스넥) 에서 장바구니 수량 제어 중

다른 카테고리로 넘어갈 때 컴포넌트가 재랜더링 되지 않고 변경된 카테고리에 영향을 줘

장바구니 제어 상태가 계속 오픈되어 있는 현상이 발견되었다.

 

(아래 이미지의 상단에 있는 카테고리 선택 시 하단의 상품 리스트가 새롭게 갱신되며 다시 랜더링 되는 것을 원했다)

 

 

 

장바구니 수량 제어 중 카테고리 이동 시 장바구니 제어 상태가 오픈된 상태로 이동됨

의도한 것은 표의 첫 번째 이미지 처럼 카테고리 이동 시 닫혀있는 상태여야 한다.

그래서 처음 생각한 것은 useEffect를 이용하여 컴포넌트가 언마운트 될 때 return된 함수가 실행되게 하여

현재 수정중인 장바구니 수량을 갱신하려 했으나 카테고리 변경을 진행해도 useEffect에서 return한 함수가

계속 실행이 안되는 이슈가 있었다.

 

여기서 내가 한 실수는 크게 2가지인데

첫 번째는 카테고리가 바뀔 때 API를 이용하여 얻은 데이터를 상품 리스트에 props로 같은 컴포넌트에 값을 전달해주는 것이었다

이렇게 되면 원래 있던 컴포넌트에 새로운 값을 랜더링 하는 것이므로 컴포넌트를 새로 호출하지 않고 기존 컴포넌트를 사용하여

언마운트 되지 않고 있었다.

 

두 번째는 첫 번째 실수와 같은데 map 함수를 돌릴 때 키 값을 unique한 값으로 설정하지 않고 map 함수가 내뱉은 idx 값으로 설정한 것이다.

이렇게 되면 랜더링 되는 객체들에게 0번부터 ~ n번까지 카테고리가 변경되어도 동일한 key값을 가지고 랜더링 되기 때문에

새롭게 랜더링 되어야 한다고 인식하지 못했다.

 

해결 방법

상품 리스트에 카테고리 id를 key 값으로 unique하게 전달했다.

react의 경우 key값을 기준으로 비교하여 값이 다른 객체의 경우 같은 컴포넌트명을 사용해도

기존 컴포넌트를 언마운트하고 새로 생성하기 때문에 카테고리를 변경하면

새롭게 생성된 컴포넌트를 랜더링하기 때문에 단순히 새롭게 생성하라고 하면 되는 것이었다.

 

처음에 생각처럼 잘 안되서 무슨 문제가 있나 검색하던 와중 아래의 질문글이 힌트가되었다.

https://okky.kr/article/724111

OKKY | React 에서 useEffect의 return 호출 조건이 이해가 안됩니다!

class 컴포넌트와 function 컴포넌트의 차이점에 대해 더 잘 알 수 있도록 된 계기가 된거 같다.