React의 Callback Vs Vue의 Event Emit
최근 React의 callback 패턴과 Vue의 이벤트 emit 패턴에 대해 생각하게 되었다.
React에서는 자식 컴포넌트로 callback을 넘겨 이벤트를 처리하는 방식을 사용하는데, 이는 결국 상위 컴포넌트와 하위 컴포넌트가 서로 밀접하게 연결되어야 한다는 것을 의미한다.
반면에 Vue에서는 이벤트를 emit하는 방식이 일반적이다. 하위 컴포넌트는 이벤트를 발생시키고, 상위 컴포넌트는 그것을 수신하여 처리한다. 이 방식은 하위 컴포넌트와 상위 컴포넌트 사이의 결합도를 낮추는 효과가 있다는 것을 알았다. 각 컴포넌트는 자신의 역할에 집중할 수 있으며, 서로에 대해 알아야 하는 것이 최소화되니까.
그리고 응집도라는 개념을 생각해보았다. React의 callback 패턴에서는 상위 컴포넌트에게 로직을 위임하는데, 이렇게 되면 하위 컴포넌트의 역할이 줄어들어서 응집도가 약화된다는 생각이 들었다.
그러나 Vue에서는 하위 컴포넌트가 이벤트를 emit함으로써 자신의 상태와 관련된 동작을 잘 캡슐화할 수 있다는 생각이 들었다. 이렇게 하면 하위 컴포넌트는 자신의 역할에 집중할 수 있어서 응집도가 향상된다.
이전에는 React에서 코드를 작성할 때 그냥 별 고민없이 작동하기 위한 callback을 넘겼었다.
하지만 이런 생각을 가지게 된 이후로는 React에서도 Vue처럼 emit하는 느낌으로 작성하려다보니 자연스레 자식 컴포넌트의 props 중 함수는 on으로 시작하는 이름들을 갖게 되더라
꽤 많은 UI 컴포넌트 라이브러리들도 이런 이름으로 props를 받는 것 같았다.
라이브러리로써 다른 어플리케이션에서 사용되기 위해서 이런 이름을 사용하는 것이 아닌가 생각되었다.
