객체 상태 다루기 정리에서
불변성을 유지하기 위해 깊은 복사를 해야 한다고 설명하셨는데 스프레드 연산자는 얕은 복사아닌가요??
왜 깊은 복사라는 표현을 사용하셨는지 궁금합니다!
답변 2
1
안녕하세요!
질문하신 내용이 일부 맞아요!
{ ...state }와 같은 스프레드 연산을 사용한 복사는 얕은 복사가 맞습니다.
깊은 복사는 중첩된 객체들까지 전부 새로 복사하는 건데,
여기선 그 정도까지는 필요하지 않아요.
제가 "깊은 복사"라고 표현한 건, 상태를 새로 만드는 과정에서 기존 객체를 완전히 복제하는 걸 말하려는 의도였는데, 정확히 말하면 "최상위 수준의 얕은 복사"가 맞는 표현이에요.
React의 상태 관리에서 중요한 건 참조가 바뀌는지 여부예요.
최상위 객체의 참조만 바뀌면 React는 변경을 감지하고 리렌더를 트리거하니까,
실제로는 스프레드 연산자로도 충분한 경우가 대부분이죠.
만약 state 안에 중첩된 객체까지 변경이 필요하다면,
그 안쪽도 별도로 복사해줘야 해요. 그럴 땐 진짜 "깊은 복사"가 필요합니다 😀
0
안녕하세요, 인프런 AI 인턴입니다. 곰코드님.
맞습니다. 말씀하신 것처럼 스프레드 연산자는 얕은 복사를 수행합니다. 이는 객체의 최상위 속성들만 복사하고 중첩된 객체의 경우 참조를 복사합니다. 따라서 중첩된 객체를 포함한 구조의 복사를 위해서는 깊은 복사가 필요합니다.
스프레드 연산자와 불변성
얕은 복사 (Shallow Copy): 스프레드 연산자(…)를 사용하면 객체의 첫 번째 레벨의 속성들만 복사됩니다. 즉, 중첩된 객체나 배열은 참조만 복사되기 때문에 중첩된 객체의 값을 직접 변경하면 원본 객체도 영향을 받습니다.
깊은 복사 (Deep Copy): 모든 중첩 객체를 포함하여 완전히 새롭게 복사된 객체를 생성합니다. 이를 통해 원본 객체를 완전히 독립적으로 유지할 수 있습니다. 깊은 복사를 위해서는
lodash의cloneDeep함수나structuredClone, JSON을 이용한 방법 등이 사용됩니다.
관련 링크
더 자세한 설명이 필요하시다면 관련 질문을 참고하실 수 있습니다:
이해를 돕기 위한 이러한 설명과 자료들이 도움이 되셨길 바랍니다. 더 궁금한 점이 있으시면 주저하지 말고 질문해 주세요!
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
cloudinary 관련
0
39
3
useOptimistic 실전-1 useState
0
60
2
discord 초대장 갱신이 필요한거같습니다.
0
61
1
할일 관리 앱(메모이제이션)
0
79
2
Web 플랫폼 등록
0
105
2
함수 정의 기준
0
76
2
fetch는 사용되는가
0
75
2
전역상태 관리 선택 기준
0
85
2
tailwind css는 언제 사용되는가 또 다른 css와의 차이
0
151
2
카카오 web플랫폼 등록
0
144
2
컴포넌트 그리고 폴더 구조에 대해
0
58
2
152강 보는중입니다. 초시계부분이구요. 넘버가 timeout을 받을수없다는 에러가 나오고 있어요
0
42
1
폼테그 다른 태그를 하나의 상태 객체로 묶기
0
43
2
class를 className으로 전부 수정하실 때
0
42
2
JWT에 대한 개념도 학습할 수 있나요?
0
64
2
수업자료 다운로드
0
51
2
리액트 객체의 타입을 알기위하여 마우스를 올렸을 때 나오는 형식이 강의와 다른 부분 문의 드립니다.
0
65
2
useState 자동생성 하실때 누른 키보드가 궁금합니다.
0
51
1
타입스크립트 타입이 불일치하는데 에러가 안납니다.
0
74
3
default format >> prettier 이 실행이 안됩니다.
0
65
2
윈도우 사용자입니다. homebrew 윈도우 설치법은 없나요?
0
341
3
리렌더링 관련 문의
0
56
2
공부 방향에 대해서
0
62
2
form action 과 onSubmit
0
59
2