bind 와 on:input, value 의 차이점에 대해 질문드립니다.

Question

let text 가 정의된 상황에서 -> bind를 사용하여 양방향 바인딩을 해주는 방법과 {text = e.target.value}} /> -> value, on:input을 사용하여 양방향 바인딩을 해주는 방법이 결과적으로는 같은데 두번째 방법을 사용해야 할 상황이 있을까요? 생각해보면 회원가입 입력폼에서는 양방향으로 사용할 필요가 없으니까 {text = e.target.value}} /> 위와 같이 사용해도 될 것 같다는 생각은 드는데 실무에서는 보통 어떤식으로 사용하는지 궁금합니다.

HEROPY · Answer

정재원 님 안녕하세요. 좋은 아침입니다~😆 우선 결론을 정리하자면, 상황에 맞는 패턴을 사용하면 된다고 생각합니다. 말씀하신 회원가입 입력 양식의 경우 데이터 바인딩 없이 입력값만 사용해 갱신하는 방법도 효율적일 수 있습니다. 또한, 단방향 바인딩 후 input 이벤트로 처리하는 때도, 다음 코드와 같이 값의 갱신 전 다른 로직이 포함된다면 당연히 해당 방식을 사용해야겠죠. on:input={e => {     console.log(e) // 등 기타 로직..     text = e.target.value }} 결국 입력 양식이 회원가입에만 있는 것은 아니기 때문에 언제든지 다른 패턴이 필요할 수 있습니다. 그래서 상황에 따라 더 효율적인 방법을 선택할 수 있는 아주 주관적인 판단의 문제로 생각이 됩니다. 저 같은 경우는 대부분 입력 양식 바인딩은 양방향을 선호합니다. 입력 양식이라는 것이 화면 측에서 데이터를 갱신하는 방법이기 때문에 모던 프레임워크의 반응성(Reactivity)와 결부해보면 입력 양식 관리는 '양방향 데이터 바인딩'으로 귀결됩니다. 예를 들어 입력 데이터의 유효성 검사(Validation)를 고려하면 데이터를 양방향으로 연결해줘야 검사된 내용의 문제를 입력 양식에 제대로 표현할 수 있을 듯합니다.(물론 꼭 양방향으로 연결하지 않아도 검사를 할 수는 있습니다만..) 혹시 제가 질문 의도를 제대로 이해하지 못했거나 답변이 부족하다면, 다시 질문 남겨주세요. 즐거운 하루 보내세요 ~😉