컴포넌트

Vue+Vuex 프로젝트하면서 생긴 문제점들로 정리한 자료이다. 컴포넌트에 직접적으로 상태를 사용할 때 재사용 및 부수 효과 발생 우려로 아래와 같이 정의한다.

상태관리에 따른 컴포넌트 이슈

• 페이지별 상태 관리 : 다른 페이지에 컴포넌트를 사용할 경우 리펙토링 비용이 발생함
• 컴포넌트별 상태 관리 : 상태를 Clear 해주는 작업이 필요

컴포넌트 개발 규칙

• 상태 머신을 직접적으로 사용하지 말아야 함
• 데이터 전달은 props로 전달

효과

• 재사용성이 늘어나 유연하게 대응할 수 있음
• Clear하는 로직없어 부수 효과가 줄어들게 됨

Computed

Computed 기능은 의존성있는 프로퍼티들의 변경이 일어났을 때만 새로 연산한다.

조건부 렌더링

조건부 렌더링에는 직접적으로 연산 로직을 삽입하지 않고, 마크업에 집중할 수 있게 함수를 사용한다.

리스트 렌더링

리스트 렌더링을 사용할 때는 <template>을 사용해서 마크업 수정에 영향없이 한다.

공통 컴포넌트 상태 머신 처리

공통단으로 정의된 상태에 액션/뮤테이션/게터/상태를 정의한다. 만약에 액션에 대한 분기가 필요할 시 파라미터를 통해 공통 액션에서 동작을 결정하도록 한다.