복잡하고 거대한 컴포넌트를 해결하기 위한 목적
로직을 재사용하고 관심사를 분리하기에 보다 용이하며 읽기 쉽고 논리적인 코드를 작성하기 위한 목적으로 도입되었습니다.
우선 setup()를 사용해서 컴포지션 api를 구현한다.
반응형 상태를 사용하려면 setup에서 반응형 상태를 선언하고 반환해야함
- 코드 가독성, 복잡성 개선
vue2의 Options API의 경우, 역할과 책임 소재에 따라 정해진 위치에 코드가 분리되어 있는 형태였습니다(data, methods, computed, watch ... ). 이는 일견 직관적이고 코드가 잘 조직화되어 있다고 생각될 수 있지만, 프로젝트의 규모가 커질 수록 중대한 결점이 드러나게 됩니다.
Composition API는 각각의 기능을 함수로 묶어서 독립적으로 정의, 처리할 수 있기 때문에, 어떤 기능을 수정하고자 하면 그 함수만 보면 됩니다.
논리를 캡슐화할 수 있는 Composables 공통 함수를 사용하여 깔끔하게 코드를 재사용할 수 있습니다. 기존에도 Mixins을 활용하는 방법이 있었지만, 아래와 같은 문제가 있어 현재는 더 이상 사용이 권장되지 않고 유지만 되고 있습니다
→ mixins을 사용하는걸 조심해야 하는 이유:
- 인수(argument)를 전달할 수 없습니다. 만약 여러 믹스인이 서로 상호작용하는 관계라면, 어떤 공유되는 값에 의존해야 하므로 결합도가 높아집니다. 컴포저블은 일반 함수처럼 다른 컴포저블에 인수를 전달할 수 있습니다.
- 여러 믹스인을 동시에 사용할 때, 제각기 어떤 믹스인에 의해 주입된 것인지가 명확하지 않아 레퍼런스를 추적하거나 동작을 이해하기가 난해합니다.
TypeScript와의 밀착도가 높아져 성능적으로 이득을 볼 수 있습니다.
Frontend Developer