개발자

useSelector 최적화 방법중 shallowEqual에 대해서 질문이 있습니다!

2023년 05월 11일조회 172

shallowEqual는 컴포넌트 리렌더링할때 객체 안의 가장 겉에있는 값을 비교 해 준다고 알고 있는데요, 만약 다음 코드의 객체가 있다면 이전 값 다음 값 object.a, object.b, object.c 만 비교하여 변경됐을 시 컴포넌트를 리렌더링 하는걸로 알고 있습니다. 그런데 이렇게 됐을 때 object.a[0] 나 object.c.x가 업데이트 되어도 컴포넌트를 리렌더링 하지 않게되는건데 괜찮은건가요..?

1const object = {
2  a: [1, 2, 3],
3  b: 'hello world',
4  c: {
5    x: 123,
6    y: 456,
7  },
8};
이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

이승현님의 프로필 사진

문제가 생긴다, 생기지 않는다 보다, 어떤 것을 생각하고, shallowEqual을 사용하는 것인지가 더 중요할 것 같습니다. object.a, object.c의 경우에는 reference type이기 때문에, object.a[?]나 object.c.? 를 접근해서 바꿔주는 방식으로 하면, shallowEqual로는 바뀐 것이 없는 것처럼 보일 겁니다. 반면에 object.a[0]의 값만 바뀌었지만, object.a의 다른 값은 동일하고, a[0]의 값이 바뀐 다른 배열을(nextA) object.a에 할당하면(개념적으로, object.a = nextA) object.a 가 바뀌게 되기 때문에 re-rendering이 일어나게 됩니다. (object.c의 경우도, field만 바꾸는 것이 아닌, 바뀔 field이외에는 동일한 값을 지닌 객체를 object.c에 할당해 줘도 re-rendering이 일어나게 됩니다.) 따라서, a, b, c가 아예 바뀌는 경우에만 re-rendering하고, 그렇지 않을 때는 유지해야 하는 use case가 있다면, 활용해 볼 만 하지 않을까 생각됩니다. 예를 들면, 사용자 순위(platinum, gold, silver)에 대한 정보가 있을때, 작은 ticker로 표현한다면, 그 정보의 세부적인 사항(현재 점수?)은 보여 줄 필요가 없이 안 바뀌는 이름정도만 보여주게 될 겁니다. 그렇다면 해당 순위의 사용자가 바뀌지 않는 한, 따로 re-rendering 할 필요가 없을 것이고, 그 순위가 바뀌어서 사용자 자체가 바뀐다면, 그 때는 re-rendering 해야 할 것입니다. 이런 경우라면, shallowEqaul 써 볼만 하다고 생각됩니다. :)

커리어리 AI 봇님의 프로필 사진

shallowEqual은 객체의 얕은 비교를 수행하여 컴포넌트의 리렌더링을 결정합니다. 따라서 shallowEqual을 사용하면 객체의 가장 겉에 있는 값만 비교하게 됩니다. 이는 객체의 깊은 내부 값까지 비교하지 않으므로, object.a[0]이나 object.c.x가 변경되었을 때에는 해당 값의 변경 여부를 감지하지 못하고 컴포넌트를 리렌더링하지 않는 문제가 발생할 수 있습니다. 이러한 상황에서는 shallowEqual을 사용하기보다는 객체의 내부 값이 변경될 때도 정확히 감지할 수 있는 깊은 비교를 수행하는 방식을 고려해야 합니다. 예를 들어, Lodash의 'isEqual' 함수나 immer의 'isDraftable' 함수를 사용하여 객체의 깊은 비교를 수행할 수 있습니다. 이렇게 깊은 비교를 수행하면 객체의 내부 값이 변경되었을 때에도 컴포넌트가 정확하게 리렌더링되어야 합니다. 따라서 shallowEqual을 사용할 때는 객체의 내부 값까지 정확히 비교할 수 있는지를 고려해야 합니다. 객체의 내부 값이 중요한 상황이라면 깊은 비교를 수행하는 방식을 사용하는 것이 좋습니다.

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!