장바구니 리렌더링문제 해결

 

문제점

 

1.장바구니에서 상품수량이 +를 눌러도 반응하지않다가

재렌더링시 반응함

 

문제원인

 

1.카트 컴포넌트에서 리덕스 state를 내려받았다.

2. state내에 중복상품번호를 없애기위해서 내려받은뒤에 필터로 중복을 없애주었다.

3.중복없앤 상품들을 다시 state에 넣고 map을 이용해 출력했다.

4.onclick에는 리덕스 state를 변경하기위해서 디스패쳐로 요청을 만들고 action이란 요청서와함께 리덕스에 요청했다

5.리덕스는 요청을 받고 리덕스툴킷덕에 특정원소만 변경해도 state의 불변성을 지켜주면서 변경을했다

6.state내에 변경이 된후 리덕스는 최상위 컴포넌트에서 내려주고 있으므로 하위컴포넌트를 재렌더링시켜준다

7.리덕스state를 변경하여 컴포넌트로가져오고 usestate에 중복을 없앤 리덕스state를 넣으면 연쇄적으로 바뀌기에 출력물도 괜찮을거라고 판단했다

 

몰랐던개념

 

1. 하나의 페이지나 컴포넌트 내에도 수많은 상태값이 존재한다. 만약 이 상태 하나하나가 바뀔 때마다 화면을 리렌더링 한다면 문제가 생길수도 있다.

때문에 리액트는 성능의 향상을 위해서 setState를 연속 호출하면 배치 처리하여 한 번에 렌더링하도록 하였다. 아무리 많은 setState가 연속적으로 사용되었어도 배치 처리에 의해서 한 번의 렌더링으로 최신 상태를 유지하는 것이다.

 

2.usestate는 비동기적으로 동작한다.......

 

 

해결방안

 

1. 컴포넌트로 가져와서 필터를 넣어주지말고 애초에 리덕스state에서 중복을 빼고 컴포넌트에선  받아서 출력하기만해야했다

 

 

깨달은점

 

1.리덕스 state를 컴포넌트에 복사해서 가져온뒤 커스텀을해버리면 리덕스의 무결성이 깨져버린다.

 

2.모든 컴포넌트가 공유하는 자원인데. 한 컴포넌트에 가져와서 변경시켜버리면 여러군데 다른 리덕스state가 존재해버린다.

3.컴포넌트에서 리덕스로 괜히 요청만하는게 아니다 리덕스state는 출력용도로만 쓰자