![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bqAtnv/btrvglNPSjN/e06KHKu16w8zByAh4guMd0/img.png)
할일 목록을 만들면서 Vue3 배워보자 - 01 > 할일 목록을 만들면서 Vue3 배워보자 - 02 할일 목록을 만들면서 Vue3 배워보자 - 03 먼저 Store 없이, emits을 통해서 데이터 통신하는 방식으로 개발해보겠습니다. Style 영역은 01과 달라진 부분이 없으므로 코드에 나타내지 않겠습니다. 기능 개발 - 01 등록하기 views/App.vue 데이터 정의는 ref를 사용합니다. 1. App.vue가 가장 최상위 파일이므로 todoList 데이터를 만들어줍니다. TodoItem에 대한 interface도 작성해줍니다. 이때, status는 string으로 해도되지만 'active'와 'clear'만 사용할 것이므로 문자열로 적어줍니다. (vue에서 props받을 때, validator ..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/YrGtH/btqEdjBRHaa/v6KIuXPKQMTKnwMAYDCmyk/img.png)
강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn state나 props가 늘어나면 관리가 힘들어진다. 그리고 props를 넘기게될때 자식에 자식에 자식의 컴포넌트가 있다면 복잡해진다. 이떄 useReducer를 써서 관리할 수 있다. useReducer를 배우면 redux랑 비슷한 효과를 낼 수 있다. contextAPI + useReducer를 쓸 경우 redux를 사용안해도 되지않나?라고 하는경우들이 있는데 대체하기는 어렵다고 한다. 거창한 redux가 필요없을 경우 (작은 프로젝트)에는 대체하는 형식으로 쓸수는 있다고 한다. 왜냐면 contextAPI와 useReducer를 쓰..
- Total
- Today
- Yesterday
- 기초
- frontend
- 차이
- 제이쿼리
- 코딩애플
- 리액트
- html
- 브라우저
- VUE
- 자바스크립트
- css
- vue.js
- 공부
- React
- 통신
- 타입스크립트
- Article
- 메서드
- TypeScript
- JS
- jQuery
- Study
- 프론트엔드
- 아티클
- 강의
- 프로젝트
- JavaScript
- 제로초
- Method
- 뷰
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |