인프런 커뮤니티 질문&답변

1. ref를 사용했을 때 동작하는 이유:

const checkboxValues = ref([])

• ref는 값을 .value 속성을 가진 객체로 래핑합니다

• Vue는 이 래핑된 객체를 추적하고 변경사항을 감지할 수 있습니다

• v-model은 내부적으로 이 .value에 접근해서 값을 업데이트합니다

2. reactive가 동작하지 않는 이유:

const checkboxValues = reactive([])

• reactive는 원본 배열을 직접 반응형으로 만들려고 합니다

   

• 하지만 v-model이 배열을 새 배열로 교체하려고 할 때 문제가 발생합니다

• reactive로 만든 배열의 참조가 끊어지면서 반응성이 사라집니다

쉽게 비유하자면:

• ref는 "상자"를 만들어서 그 안에 배열을 넣는 것입니다. 상자 자체는 그대로 있고 안의 내용물만 바뀝니다.

• reactive는 배열 자체를 특별하게 만드는 건데, v-model이 새 배열로 교체하면 그 "참조"가 사라집니다.

따라서 v-model과 함께 사용할 때는 ref를 사용하는 것이 더 안전합니다.

만약 reactive 를 사용하고 싶다면 객체 내부에 속성으로 선언하여 참조가 끊어지지 않도록 해야합니다.

const checkbox = reactive({
			values: [],
		});

안녕하세요, 인프런 AI 인턴입니다. haenjung2님.

vue.js에서 v-model을 사용할 때, 특히 배열이나 객체와 같은 복합 데이터 타입을 다룰 때 ref()와 reactive() 사이의 선택은 중요한 의미를 가집니다.

ref와 reactive의 차이

1. ref: 단일 값이나 객체를 감싸서 반응성을 유지합니다. 특히 ref([])와 같이 배열을 감쌀 때, 배열을 조작하는 것이 가능합니다. 여기서 핵심은 ref는 .value를 통해 값에 접근해야 한다는 점입니다.

2. reactive: 객체의 속성을 살려줌으로써 반응성을 제공합니다. 그러나 기본형 타입을 감싸는 것에는 적합하지 않습니다.

v-model에서의 동작

• v-model은 ref의 상태를 조작할 때 최적의 선택인 경우가 많습니다. ref([])를 사용하여 체크박스의 선택 상태를 관리하면, 각각의 상태 변화가 배열에 잘 반영됩니다. 이는 ref의 .value 내부에서의 변화를 Vue가 감지하기 때문입니다.

• 반면, 배열 자체를 reactive([])로 만들고 직접 조작하는 경우, Vue는 내부의 추가적 변경을 제대로 감지하지 못할 수 있습니다. 배열이나 객체가 변경될 때, 그 내부에서 어떤 일이 일어나고 있는지에 대해 reactive보다 ref가 더 좋은 감지 및 반응 메커니즘을 제공하기 때문입니다.

관련된 기존 토론을 통해 더 깊이 이해할 수 있는 자료를 공유합니다:
- reactive vs ref… 굳이 reactive를 사용하는 이유가 뭔가요? - 객체와 배열을 처리할 때 ref와 reactive의 차이점에 대한 논의입니다.
- ref와 reactive 차이점? - ref와 reactive의 기본적인 차이를 이해하는 데 도움을 줄 수 있는 질문입니다.

위 링크들을 참고하시면 각 메서드가 어떤 상황에서 사용되어야 하는지 더 명확하게 이해하실 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.