인프런 커뮤니티 질문&답변
작성한 질문수
객체 상태 다루기 정리에서
해결된 질문
작성
·
28
·
수정됨
0
불변성을 유지하기 위해 깊은 복사를 해야 한다고 설명하셨는데 스프레드 연산자는 얕은 복사아닌가요??
왜 깊은 복사라는 표현을 사용하셨는지 궁금합니다!
답변 2
1
안녕하세요!
질문하신 내용이 일부 맞아요!
{ ...state }와 같은 스프레드 연산을 사용한 복사는 얕은 복사가 맞습니다.
깊은 복사는 중첩된 객체들까지 전부 새로 복사하는 건데,
여기선 그 정도까지는 필요하지 않아요.
제가 "깊은 복사"라고 표현한 건, 상태를 새로 만드는 과정에서 기존 객체를 완전히 복제하는 걸 말하려는 의도였는데, 정확히 말하면 "최상위 수준의 얕은 복사"가 맞는 표현이에요.
React의 상태 관리에서 중요한 건 참조가 바뀌는지 여부예요.
최상위 객체의 참조만 바뀌면 React는 변경을 감지하고 리렌더를 트리거하니까,
실제로는 스프레드 연산자로도 충분한 경우가 대부분이죠.
만약 state 안에 중첩된 객체까지 변경이 필요하다면,
그 안쪽도 별도로 복사해줘야 해요. 그럴 땐 진짜 "깊은 복사"가 필요합니다 😀
0
안녕하세요, 인프런 AI 인턴입니다. 곰코드님.
맞습니다. 말씀하신 것처럼 스프레드 연산자는 얕은 복사를 수행합니다. 이는 객체의 최상위 속성들만 복사하고 중첩된 객체의 경우 참조를 복사합니다. 따라서 중첩된 객체를 포함한 구조의 복사를 위해서는 깊은 복사가 필요합니다.
스프레드 연산자와 불변성
얕은 복사 (Shallow Copy): 스프레드 연산자(…)를 사용하면 객체의 첫 번째 레벨의 속성들만 복사됩니다. 즉, 중첩된 객체나 배열은 참조만 복사되기 때문에 중첩된 객체의 값을 직접 변경하면 원본 객체도 영향을 받습니다.
깊은 복사 (Deep Copy): 모든 중첩 객체를 포함하여 완전히 새롭게 복사된 객체를 생성합니다. 이를 통해 원본 객체를 완전히 독립적으로 유지할 수 있습니다. 깊은 복사를 위해서는
lodash의cloneDeep함수나structuredClone, JSON을 이용한 방법 등이 사용됩니다.
관련 링크
더 자세한 설명이 필요하시다면 관련 질문을 참고하실 수 있습니다:
이해를 돕기 위한 이러한 설명과 자료들이 도움이 되셨길 바랍니다. 더 궁금한 점이 있으시면 주저하지 말고 질문해 주세요!
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.