공부하면서 헷갈렸던 개념 중 하나가 단방향 바인딩과 양방향 바인딩이었습니다.
처음에는 데이터를 주고받는 구조면 다 양방향 바인딩(v-model)인 줄 알았는데,
단방향(v-bind)에 이벤트를 추가해서 양방향처럼 보이게 만들 수도 있다는 걸 알게 되었습니다.
이 글에서는 Vue에서의 v-bind와 v-model의 차이를
체크박스 예제를 통해 간단히 정리해 보았습니다.
1. 단방향 바인딩이란? (v-bind)
단방향 바인딩은 데이터가 한 방향(부모->자식)으로만 흐르는 구조입니다.
Vue에서는 v-bind나 :를 사용하여 속성에 데이터를 전달합니다.
<img :src="imageUrl" />
imageUrl 값이 바뀌면 이미지가 바뀌지만,
사용자가 이미지를 클릭하거나 수정해도 imageUrl은 자동으로 바뀌지 않습니다.
2. 양방향 바인딩이란? (v-model)
양방향 바인딩은 데이터가 양쪽으로 오고 가는 구조입니다.
즉, 상태가 바뀌면 화면이 바뀌고, 화면에서 입력하면 다시 상태가 바뀝니다.
Vue에서는 v-model 디렉티브가 대표적인 양방향 바인딩입니다.
<input v-model="userInput" />
사용자가 값을 바꾸면 데이터가 같이 바뀌기 때문에
주로 input, checkbox, select 같은 폼 요소에서 많이 쓰입니다.
3. 언제 어떤 걸 써야 할까?
- 단순한 값 전달이라면? v-bind
- 사용자 입력이 필요하다면? v-model
4. 체크박스 예시로 이해하는 바인딩 방식
저는 체크박스 예제를 보다가 개념이 헷갈리기 시작했습니다.
체크박스는 양방향이니까 무조건 v-model을 써야 한다고 생각했는데,
단방향 바인딩에 이벤트 처리를 조합해서 구현하는 방식도 있다는 걸 알게 됐습니다.
1) v-model 사용 (양방향 바인딩)
<input type="checkbox" v-model="isChecked" />- isChecked 값이 true/false로 자동으로 연결
- 체크하거나 해제하면 값이 자동으로 바뀜
- 반대로 isChecked 값을 바꾸면 체크 상태도 반영됨
2) :checked + @change 사용 (단방향 + 수동 이벤트 처리)
<input type="checkbox" :checked="isChecked" @change="isChecked = $event.target.checked" />- 체크박스 상태는 isChecked를 읽기만 함
- 체크해도 isChecked는 자동으로 안 바뀜
- 그래서 @change 이벤트로 직접 갱신해야 함
- 비교 요약표
| 항목 | v-model | :checked + @change |
| 바인딩 방향 | 양방향 | 단방향 |
| 값 자동 변경 | O | X |
| 코드 간결성 | 간결함 | 직접 처리 필요 |
| 사용 예 | 대부분의 경우 | 커스터마이징 필요 시 |
| vue 내부 처리 | 자동 | 수동 |
3) 겉보기엔 똑같지만, 내부 동작은 다르다
결과는 같지만, Vue 내부에서는 완전히 다른 방식으로 적용됩니다.
- v-model → Vue가 :checked와 @change 처리를 자동으로 해줌
- :checked + @change → 우리가 직접 값 변경 코드를 작성해야 함
4) 실무에서는?
단방향 바인딩 + 이벤트 처리는 특별한 경우(복잡한 커스터마이징 등)를 제외하면 잘 사용되지 않는 것 같습니다.
대부분의 경우, 간단하고 직관적인 v-model을 사용하는 것이 좋다고 합니다!