vue3 ref vs reactive

Vue 3의 ref와 reactive는 둘 다 Vue로 상태 관리를 할 때 사용하는 반응형 상태 관리 도구이지만, 사용 용도와 작동 방식에서 차이가 있습니다. 아래에서 각각의 공통점, 차이점, 장점 그리고 단점을 살펴보겠습니다.

공통점

1. 반응형 데이터: ref와 reactive 모두 데이터가 변경될 때 컴포넌트를 자동으로 다시 렌더링한다는 점에서 동일합니다.
2. 사용 용도: 둘 다 Vue 컴포넌트 내에서 상태 관리를 위해 사용되며, 데이터를 추적하고 변화에 대응합니다.
3. API 지원: Vue 3에서 Composition API와 함께 사용됩니다.

차이점

1. 데이터 타입:

   • ref: 원시 타입(예: 문자열, 숫자, 불리언)을 포함한 모든 종류의 데이터를 다룰 수 있도록 설계되었습니다. 또한 객체와 배열을 다룰 때도 사용할 수 있습니다.
   • reactive: 객체나 배열과 같은 복합 데이터를 다루는데 더 적합합니다.

2. 참조 방식:

   • ref: 변수에 .value 프로퍼티를 통해 접근해야 합니다.

     const count = ref(0);
     count.value++;

   • reactive: 변수에 직접 접근할 수 있습니다.

     const state = reactive({ count: 0 });
     state.count++;

3. 복사와 깊은 반응형:

   • ref: 단일 값의 반응형 업데이트를 가지고 객체와 배열 사용시 reactive를 자동으로 매핑해줘서 내부도 반응형 업데이트를 보장해준다.
   • reactive: 복합 데이터 구조 전체를 깊이 있게 반응형으로 만듭니다.

장점

ref

1. 초기화 용이성: 간단한 원시 데이터 타입의 상태를 초기화하기 쉽습니다.
2. 단순성: 단일 변수만 다루는 경우 사용이 직관적입니다.
3. 호환성: 무조건 객체가 아닌 원시 값에 대해 반응형 상태를 필요로 할 때 유리합니다.

reactive

1. 구조 단순화: 복잡한 상태를 하나의 반응형 객체로 묶어 관리할 수 있습니다.
2. 자동 반응형 처리: 객체의 속성 추가/삭제가 가능한 경우 reactive가 자연스럽게 반응형 상태로 유지합니다.

단점

ref

1. 접근성: .value 프로퍼티를 통해 접근해야 하므로 코드가 다소 장황해질 수 있습니다.

reactive

1. 고급 사용: 원시 타입을 다룰 때는 적합하지 않습니다.
2. JSON 변환: JSON.stringify를 사용할 때 반응형 객체는 경고를 발생시킬 수 있습니다.

선택 기준

• 일단 ref를 사용합니다.
• 코드 가독성을 위해 객체로 묶어서 관리하는게 나은거같다면 reactive를 선택합니다.