• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

useSelector를 배열로 반환하는 방식의 문제에 대한 질문입니다.

21.01.25 18:30 작성 조회수 417

0

3:40 에 부분에 해당하는 질문인데, 
아래 질문의 답변을 참고 후 명확한 이해를 위해 질문 드립니다.

useSelector의 selector 함수 안에 있는 두 값이 변경되지 않아도 redux에서 액션이 처리될 때마다 불필요하게 이 컴포넌트가 렌더링 될 수 있는 단점이 있다라고 설명해주시고,
아래 답글에서 "두 값이 변경되지 않았는데 렌더링을 하는 것은 비효율적이라는 의미"라고 답변을 주셨는데

redux에서 액션이 발생해서 두 값이 변경되지 않아도 렌더링이 된다는 걸까요?
(변경이 없는 dispatch를 만들어 돌렸을 때는 렌더링 되지 않는 것 같아서요)

그렇지 않다면, 결국 값이 변경될 때만 렌더링이 일어난다는 말일테고, 
그렇다면 "불필요한 렌더링"이라는게 어느 경우일지요?

다른 컴포넌트에서 동일한 state의 값에 대한 변경을 일으켰을 때의 렌더링을 "불필요한 렌더링"이라고 말씀해주신 걸까도 생각해봤는데,  결국 값이 변경된 것이라 렌더링이 불필요한 것이라 여기기에는 결국 하위 컴포넌트에서 변경된 값을 사용해야 하니 재렌더링 되는게 맞는게 아닌가 싶구요.

혹은,

이 컴포넌트의 하위 컴포넌트들에서도 참조하지 않는 state의 특정 값 (예를 들어 `state.friend.friends` 의 특정 항목의 특정 프로퍼티)이 다른 컴포넌트에서 발생한 dispatch로 redux 액션이 발생되어 변경 되었을 경우
이 컴포넌트의 재렌더링이 불필요하므로 얕은 비교를 하는 것이 좋다는 것일까요?

그런데 또 그렇게 보면, 앞서 reducer를 학습할 때 상태값을 변경할 때는 불변성을 유지해야 한다고 했으니,
다른 컴포넌트에서 방금의 액션을 취한다면 결국 이 state는 변경이 발생 될테고 
그렇다면 결국 얕은 비교를 한다 손 치더라도 변경이 발생된 게 아닌지요? 

질문하면서도 제가 헷갈리네요 ;;;;

아니면, 앞선 챕터에서 설명된 것들을 참고했을 때 이런 형태로 사용했을 경우 

const [friends, friends2, friends3 ] = useSelector(
	state => 
	[
		state.friend.friends, state.friend.friends1,
		state.friend.friends, state.friend.friends2,
		state.friend.friends, state.friend.friends3
	]
);

컴포넌트가 렌더링 될 때마다 useSelector가 새로운 배열을 생성시키기 때문에 불필요한 렌더링이 일어날 수 있고,

실제로 

const [friends] = useSelector(state => [state.friend.friends]);

이렇게 작성했을 때 fiendMain 컴포넌트가 두 번 렌더링 되는 걸 확인했는데요
이 경우를 말씀하시는 걸까요?

답변 2

·

답변을 작성해보세요.

0

멀더끙님의 프로필

멀더끙

질문자

2021.01.28

명확히 이해했습니다. 

답변 감사합니다. :)

0

안녕하세요
`useSelector가 새로운 배열을 생성시키기 때문에 불필요한 렌더링이 일어날 수 있고` 라고 하신 부분이 맞습니다
아래 1번은 friends 가 변경되지 않아도 컴포넌트가 렌더링되지만,
2번은 friends 가 변경되지 않으면 컴포넌트가 렌더링되지 않습니다.

```
const [friends] = useSelector(state => [state.friend.friends]); // 1
const friends = useSelector(state => state.friend.friends); // 2
```