회사 신규 프로젝트를 vue를 사용해서 구축한다고 해서 요즘 vue 공부를 하고 있다.
처음에는 파일 구조 훑어보면서 컴포넌트 작성, 라우터 연결하면서 감 잡아보다가 백문불여일견이라고 이전에 React + Redux를 이용해 만들었던 todo list를 Vue + Vuex 조합으로 다시 만들면서 공부해 보았다.
🍏 파일 구조
CLI를 기반으로 Vue3을 구축하고 vuetify, vuex, vue-router 추가했다.
(하지만 정작 vuetify는 사용X)
간단하게 각 라이브러리에 대해 소개를 하자면!
1. vuex
vuex는 vue의 상태관리 라이브러리이다. 마치 react의 redux나 recoil과 같이...
사용법도 redux와 비슷한 편이다. store에 함수를 정의 해 두고 꺼내와서 사용할 수 있다.
2. vuetify
bootstrap과 유사한 라이브러리로 편하게 디자인을 적용할 수 있다.
공식 문서를 보고 제작하면 쉽고 빠르게 ui를 만들어낼 수 있다.
3. vue-router
페이지간 이동을 매끄럽게 도와주는 라우터 라이브러리이다.
사실 router에 대해서는 잘 모르지만 사용해본 경험으로는, url에 / 이후로 리다랙션을 어디로 향하게 할 것인지 좀 더 유연하게 만들 수 있다는 것 정도...?
파일 구조는 views 파일들을 레이아웃으로 잡고 components에서 꺼내와서 ui를 구성하도록 만들어 보았다.
그리고 router를 사용하니까 routes 폴더에 router 관리 파일을 만들었다.
vuex는 store 폴더에 store.js 라는 상태관리 파일로 사용했다.
🍏 roter, store 셋팅
react, vue는 src 폴더 안에 App과 main.js가 존재하는데, 이 파일들이 바로 root가 되는 코어를 담당하는 친구들이다.
main.js
main.js에는 App.vue가 랜더링 될 수 있도록 코드가 작성 되어 있는데, 여기서 우리는 라이브러리를 함께 적용하면 된다.
적용할 라이브러리들을 import 후 app.use(라이브러리명)으로 사용할 수 있게 연결해 주면 끝!
App.vue
App.vue 부분은 router가 들어간다면 기본적으로 templete > router-view 태그로 구조가 잡힐 것이다.
그리고 vuex를 사용하기 위해 useStore를 가져와서 넣어주면 끝!
🍏 주요 기능
store.js
store에는 사용할 수 있는 속성이 5가지(state, getters, mutations, actions, modules)가 있다.
여기서 나는 state, mutations만 사용했는데, state는 기본적인 상태값을 지정해 줄 수있다. 테스트를 편하게 하기 위해서 2개의 투두를 생성 후, 작업 상태(isDone)을 다르게 주었다.
mutations는 getters와 유사하지만 state의 값을 변환 시킬 때 사용할 수 있는데, 차이점은 mutations는 전달 인자를 받을 수 있다는 장점이 있다.
나는 state, todoId를 사용했는데, redux처럼 state와 payload로도 사용할 수 있다고 한다.
InputBox.vue
우선, 투두리스트를 생성하는 컴포넌트에 대해 알아보자.
투두에 들어가는 제목과 본문을 v-model 을 사용해서 값을 받을 수 있다.
그리고 개인적으로 신기했던게, onclick을 @click 을 사용해서 쓴다는 것...!
이거 말고도 종류가 다양한데, 나름 신선하다고 느껴졌다.
투두를 추가하기 위해서 store에 만들어 둔 addTodo 함수를 가져왔는데, store.commit을 통해 첫번째로 함수명, 두번째로는 전달할 값(payload)를 작성해 주면 된다.
WorkBox.vue
이번 투두리스트 만들면서 가장 시간을 많이 소비한 구간이였는데, 그 이유는 황당했다.
바로 react는 마크업(정확힌 jsx 문법)에 script를 자유롭게 작성해서 컨트롤을 할 수 있는데,
vue는 마크업(template 영역)과 script 영역이 완전히 분리되어 있어서 react에 비해 코드가 간결해지지 않는다는 점...?
물론 내가 아직 미숙해서 중복적으로 코드를 사용한 감이 있긴한데, 주니어인 나로써는 위 코드가 최선이자 이해하기 쉬웠다.
Detail.vue
이 컴포넌트는 만든 투두에 대한 상세보기 페이지에 들어간다.
사실 이 페이지는 원래 없어도 되는데 router 연습하려고 일부러 만들었다 ㅋㅋㅋ
위 코드에서의 힘들었던 점은...?
상세페이지 주소가 해당 투두의 id을 보고 들어가는건데, todo.id를 보게 하려고 하니 todo.id를 자꾸 못찾는 것이다. (무한의 undefined 굴레)
그래서 한참을 고민하다가 발견한 방법이 params를 통해 값을 넘겨줄 수 있다는 것!
위에서 작성한 경로 부분에 params를 통해 넘겨줄 값을 입력하면 된다.
todo list를 만들면서... ⭐
누군가 그랬다.
React를 먼저 공부한 사람이라면 Vue가 굉장히 쉬울꺼라고...
하지만 생각보다 그렇게 쉽지도 않았고 무엇보다 2버전과 3버전의 문법이 크게 달라서
구글링 하면서도 끊임없이 의심을 해야 했다. ㅠ_ㅠ
그래도 만들면서 어떻게 사용하고 헨들링하는지 감을 조금 잡아서 좋은 시간이였다.
여전히 공부를 더 많이 공부해야겠지만...! 차근차근 공부하면서 친해지도록 노력해야겠다.
Vue3 + vuex + vue-router 를 이용한 Todo List 만들기 GitHub
