man.name.last를 park으로 수정하니 name.last도 park으로 반영되었군요.
이번에는 스벨트에서 어떻게 동작하는지 확인해보겠습니다.
스벨트도 물론 이런 참조 복사가 일어납니다. 하지만 스벨트의 반응성은 조금 다르게 동작합니다. 스벨트는 모든 참조된 위치를 찾아가서 반응성을 반영할 수 없기 때문에 배열과 같이 강제 할당을 해주어야 합니다. 그렇다면 스벨트 REPL안에서 동작을 확인해보죠.
svelte.dev 웹 사이트에서 새로운 REPL을 열고 내용을 모두 지우고 다음과 같이 작성합니다.
REPL의 App.svelte
<script>
// 원본 JSON 객체 정의
let man = {
age: "10",
name: { first: "승현", last: "박" }
};
let name = man.name; // name으로 man.name 복사
function assignment() {
man.name.last = "park"; // 원본 JSON 객체의 last 값을 "박"에서 "park"으로 변경
console.log(name.last); // 복사본의 값이 변경되었는지 확인
}
</script>
<p>man.name.last: {man.name.last}</p> <!-- 원본 JSON 객체 man으로 접근한 last의 값 출력 -->
<p>name.last: {name.last}</p> <!-- 참조 변수 name으로 접근한 last의 값 출력-->
<button on:click={assignment}>할당</button> <!-- 동작 확인 트리거 -->