개발자
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};
답변 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 써 볼만 하다고 생각됩니다. :)
shallowEqual은 객체의 얕은 비교를 수행하여 컴포넌트의 리렌더링을 결정합니다. 따라서 shallowEqual을 사용하면 객체의 가장 겉에 있는 값만 비교하게 됩니다. 이는 객체의 깊은 내부 값까지 비교하지 않으므로, object.a[0]이나 object.c.x가 변경되었을 때에는 해당 값의 변경 여부를 감지하지 못하고 컴포넌트를 리렌더링하지 않는 문제가 발생할 수 있습니다. 이러한 상황에서는 shallowEqual을 사용하기보다는 객체의 내부 값이 변경될 때도 정확히 감지할 수 있는 깊은 비교를 수행하는 방식을 고려해야 합니다. 예를 들어, Lodash의 'isEqual' 함수나 immer의 'isDraftable' 함수를 사용하여 객체의 깊은 비교를 수행할 수 있습니다. 이렇게 깊은 비교를 수행하면 객체의 내부 값이 변경되었을 때에도 컴포넌트가 정확하게 리렌더링되어야 합니다. 따라서 shallowEqual을 사용할 때는 객체의 내부 값까지 정확히 비교할 수 있는지를 고려해야 합니다. 객체의 내부 값이 중요한 상황이라면 깊은 비교를 수행하는 방식을 사용하는 것이 좋습니다.
커리어리 AI 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!