[TIL] 190725

오늘 한 일

• Vue.js 완벽 가이드 강의 2개 수강.

공부 내용

동적 라우트 적용하는 방법을 배웠다.

{
	path: '/user/:id',
	component: UserView
}

routes>index.js 파일에 path를 "/user/:id" 이런식으로 정의해주면 /user/뒤에 오는 값이 파라미터로 인식되어서 $route.params.id로 데이터를 가져올 수 있다.

해당 라우트에 연결하기 위해서는 컴포넌트에 <router-link>태그를 사용한다.

<router-link v-bind:to="`/user/${item.user}`">{{ item.user }}</router-link>

위와 같이 router-link 태그의 to 속성에 해당 path를 연결하여 해당 유저의 아이디 값을 동적으로 매핑해준다.

 

vuex를 사용하면서 약간 애매한 부분이 생겼다. 컴포넌트 템플릿에 데이터를 바인딩할 때, this.$store.state.user.id 이런 식으로 길어질 경우, 다양한 방식으로 텍스트를 간소화(?) 할 수 있는데, 이 때 기존 vue 속성인 computed를 사용할 것이냐, 아니면 vuex에서 제공하는 헬퍼인 mapState 또는 mapGetters 이런 애들을 쓸것이냐... 그것이 나를 혼란스럽게 만들었다.

처음에 내가 생각한 것은 computed나 mapGetters는 모두 계산된 데이터를 사용하기 위해 만들어졌기 때문에 단순히 텍스트를 대체하기 위한 용도일 경우, 당연히 그 역할을 위해 만들어진 mapState를 사용하는 것이 공식에서 제안하는 것일거라 생각했다.

vuex 공식문서에 나온 mapState 헬퍼의 역할

실제로 공식문서에도 그렇게 나와있다. 그러나 오늘 수강한 강의에서 캡틴판교님 말에 의하면 템플릿 부분 텍스트를 깔끔하게 하기 위해 computed를 거치는 것은 Vue.js 공식 가이드에 나와 있는 방식이라고 한다. (이 부분을 공식문서에서 아직 찾지는 못했다.) 이 때부터 혼란스럽기 시작했다. 그러면 mapState나 mapGetter는 언제 사용해야 하는걸까?

사실 개발자 성향에 따라, 또는 프로젝트 상황이나 해당 속성의 효율성에 따라 사용하기 나름일 것이라 생각은 든다. 그러나 그걸 선택한데에는 보다 명확한 이유가 있을 것 같다. 아직 내 수준으로는 판단하기 어려운 문제다. 시간이 흐르고 연차가 쌓이면 이러한 문제들을 스스로 해결할 수 있는 경지에 도달할까?

오늘은 공부내용을 적으면서 자연스럽게 느낀점도 적어버렸다. 그러므로 이것으로 끝.