취향이 아닌 목적에 맞게

모든 컴포넌트가 비즈니스 요구사항이 없는 순수 유틸 컴포넌트는 아니다. 그러므로 vue에서 class component library를 이용해 class style syntax로 property decorator의 조합을 쓸 것인지, 아니면 setup hook에 composition api를 얹어서 쓸 것인지를 결정하는 것은 개인의 취향에 따른 결정사항이 아니다. 오로지 상황과 필요에 따라 결정해야 하는 것이다.

만일 순수 유틸 컴포넌트라면 vue class component + property decorator 조합으로 가면 된다. class란 캡슐화시킨 멤버 변수와 멤버 메서드의 조합이다. '멤버'라는 용어를 class에서 사용하는 이유는 그것들이 문자 그대로 '멤버'로서  한 곳에 있는 것이기 때문이다. 멤버들은 상호 유기적으로 결합되어 목적을 달성하도록 구성된다.  그것들의 조합이 바로 class이다. 그러므로 class 안에는 멤버들의 목표와 무관한 코드가 들어가면 안 된다. 그것의 대표 격이 바로 '비즈니스 요구사항이 반영되는 코드', 줄여서 그냥 '비즈니스 로직'이라고 부르겠다. 비즈니스 로직은 class의 목표가 아닌 그것을 기획하고 사용하는 사람들의 목표이다. class의 인스턴스를 만들어서 ux 조작 코드를 쓴다면 그것이 비즈니스 로직이다.

다행히 비즈니스 로직을 위한 조합이 앞서 얘기됐다. vue setup hook + composition api 조합이다. 이 조합은 syntax가 class 형태가 아니다. 한 줄 한 줄 책과 같이 나열되는 형태로 코드가 작성되므로 class syntax와 같이 변수와 메서드가 사람 눈에 보기 좋게 나뉘지 못하고 문자 그대로 그냥 나열되어 있다. 그래서 보기에 좋지 않고 규칙을 직접 만들지 않으면 매우 혼잡스러운 코드로 보인다. 반대로 얘기하면 혼잡스러운 상황을 핸들링하기 좋은 형태란 뜻이다. 혼잡스러운 상황이 바로 '비즈니스 로직'이다. 사람에 따라, 시간에 따라 수시로 바뀔 수 있는 높은 유동성을 지닌 로직은 setup hook과 같은 syntax를 사용하는 것이 낫다.

vue 뿐만 아니라 react도 이전에는 class style을 사용하다가 react hook이 나오며 pure function style로 개발하는 추세이다. 유사한 상황이다. 누군가 "react 개발할 때 class 스타일을 쓰세요, function 스타일을 쓰세요?"라고 묻는다면 "상황과 목적에 맞게 사용합니다"가 정답이 되겠다. class는 'class'의 목적에 맞게 멤버들의 유기적 관계를 맺어주는 용도로, function은 'function'의 목적에 맞게 입력과 그에 따른 출력을 관장하도록 사용하면 된다.

ref.

vue class component (https://class-component.vuejs.org/)

vue composition api (https://vuejs.org/api/composition-api-setup.html)