이 글은 https://medium.com/js-dojo/using-react-style-callback-props-with-vue-pros-and-cons-e0ee7455695b 의 글을 번역한 것입니다.
번역 내용 자체도 온전치않으니 번역이 이상한곳이나 오타를 알려주시면 반영토록하겠습니다.
어떤 form에서 prop을 가지고 있는데, prop은 복잡한 객체부터 간단한 문자열 또는 숫자이다. 그리고 함수일수도 있다.
이것은 Callback Props에 대한 생각입니다: 함수는 자식 컴포넌트에게 prop을 전달된 것을 가져옵니다. 그래서 자식컴포넌트는 원하면 prop을 실행할 수 있습니다.(버튼을 클릭한 이후, 양식 제출, api 요청 실패 등..)
Callback Props는 부모에서 자식으로 액션을 전달하는 리액트 방식입니다. 부모에 의해 정의된 함수는 자식 컴포넌트에게 어떤 일이 일어날때 실행됩니다. Vue.js를 events 대신에 사용할 수 있습니다.
이 접근법에는 각각 장단점이 있다. 이 기사에서는 두 접근법에 대해 비교할 것이고 당신의 프로젝트에서 가장 좋은 방법을 사용할 수 있게 결정하도록 도와줄 것이다.
Callback Props와 이벤트 emit에 대한 지식을 얻어보자
처음으로 놀라운 Vue 문서를 읽어보면 컴포넌트 사이에 간단한 커뮤니케이션 패턴을 볼 수 있다.
자식 컴포넌트는 부모 컴포넌트로부터 props를 받는다.
같은 자식 컴포넌트가 이벤트를 내보내면(emit) 부모는 이벤트를 청취한다(listen).
여기 input 값을 이용해 Vue에서 prop과 event를 사용한 예제가 있다.
이게 Vue에서의 접근법이다. 그러면 React는 이걸 어떻게 할까요? React에서는 “events”같은 것들이 있다. callback prop을 자식 컴포넌트에 넘겨줘야한다.
이건 같은 UI가 React에서는 어떻게 보이는가를 알려줍니다.
보이는 것 처럼, native onInput 이벤트를 발생할때 반응하기 위해서 우리의 컴포넌트에 (native input) 콜백 함수를 제공하고 있다.
주요 차이점은 아래와 같습니다:
1. 우리의 Vue 컴포넌트는 방출(emitted)되는 이벤트를 듣는다(listening).
2. React 컴포넌트는 자식 컴포넌트의 함수를 처리하고 알려준다. “input 이벤트를 방출할때, 그냥 함수를 호출한다.”
Vue에서 callback Props를 사용할 수 있다.
좋아, React callback Props와 Vue 이벤트를 사용해보았다. 하지만 결국 Vue는 Javascript이므로 쉽게 callback props를 전달할수 있습니다.
(.prop 수정자(modifier)를 사용했는데 우리는 native HTML input을 사용하고 있기 때문입니다. custom component에서는 그렇지 않습니다.(custom component라는 것은 사용자가 직접 정의한 컴포넌트같으나.. 정확하진않다.))
칭찬할 점
두 접근법은 유용하고 견고하다.(물론 그럴 수 밖에 없습니다.) 그리고 위에 있는 간단한 예제들을 작성할때에는 모두 똑같이 예뻐보인다.
하지만 프로젝트가 성장하고 모든것이 복잡해지기 시작했을때에는 어떻게 될까요?
이 점이 바로 내가 여러분들과 공유하고자하는 것입니다.
React에서 props, Vue에서는 props와 event에 대해서 배워야합니다.
React에서는 항상 props를 넘기고 이 prop이 렌더링할 간단한 문자열이거나 API 요청이 성공한 후 실행되어야하는 callback 함수인것은 아무런 상관이 없습니다.
prop은 그냥 정보를 자식 컴포넌트에게 줄뿐입니다. “render props”라는 패턴이 있습니다.(React 컴포넌트 사이에서 function인 prop을 사용해 코드를 공유하는 기술)
prop이 UI 컴포넌트의 렌더링을 책임집니다. 모든 것은 prop으로 제공할수있습니다.
Vue에서는 부모와 자식사이에 양방향 커뮤니케이션을 할 수 있기에 언제 props를 사용하고 event를 사용해야하는지 알고 있어야한다. 약간의 경험이 있다면 이해하기 쉬울 것이지만 그건 그냥 개발을 시작할때 알고 있어야 하는 다른 무언가를 추가한 것입니다. 큰 문제는 아니지만 문제는 여전히 존재합니다. 결과적으로 API가 더 커지게 됩니다.
Vue 이벤트는 필수사항이 아닙니다
props를 전달할때 필수 prop이 실제로 제공되는지 React PropTypes 또는 Vue 내장 prop 검증 시스템(prop validation system)을 사용해서 확인할 수 있습니다.
이벤트는 그렇게 할 수 없습니다.
그래서 이게 이득인가 아닌가? callback을 사용하면 prop을 호출하기 전에 함수가 포함되었는지 확인할 필요가 있습니다. 이벤트는 자유롭게 무언가를 방출(emit)하고 부모는 함수를 듣고(listening) 선언하는 일을 합니다.
“component API” 관점에서 이벤트는 깨끗합니다
여기, 엄청난 양의 의견을 가져와보세요.
재사용가능한 컴포넌트를 만들때 발생한 이벤트에서 주요 상호 작용은 콜백 함수에 대한 진입점(entry point)를 설정하는 것보다 더 깔끔합니다. 다시, 나의 의견은 간단합니다.
나는 그 prop이 함수를 포함하고 있는지 확인하지 않기때문에 나의 코드는 깔끔해 보인다. 어쨌든 난 나의 고객들이 모든 이벤트를 emit 할 수 있도록 문서화해야한다고 생각합니다
Vue 이벤트는 DOM이벤트가 아닙니다.
주의해야합니다. 우리는 Vue 이벤트에 대해 말했고 this.$emit(‘myEvent’)와 @myEvent=”handleEvent”를 사용해 listen하는 것입니다.
좋은 DOM 이벤트들과는 상관없고 DOM 이벤트는 전체 애플리케이션을 “(bubble up)”하고 모든 사람들이 이벤트들을 listen할 수 있습니다.
Vue 이벤트는 오직 부모 컴포넌트에게만 emit할 수 있습니다.(그보다 높은 조상들은 아닙니다.) 그래서 react와 vue prop들은 전혀 다른 종류입니다.
그래서, 어느쪽이 더 좋은가?
승자가 있다고 말할수는 없습니다. 차이점은 대부분 개념적인 측면이고 두 접근법을 사용해서 동일한 결과를 얻을 수 있습니다.
이 점을 생각해서 나는 관례(convention)을 따를것입니다. React에서는 callback Props와 Vue에서는 event를.
우리는 이제 두 시스템 사이의 유사점과 차이에 대해 알게되었고 그 이유에 대해 설명할 수 있습니다. 아싸!
