컴포넌트 생성하기, header footer todolist 만들어보기

컴포넌트 생성

 

src폴더 밑에 components폴더를 생성한다. 그리고 그 안에 각각의 컴포넌트를 구성한다,

간단하게 만들어 보았다. 내용은 아래와 같다.

그리고 App.vue에서 이 컴포넌트들을 자식 컴포넌트로 사용해주어보자.

 

이렇게 import를 해온 뒤에 component에 등록을 해주고,

컴포넌트 태그 : 컴포넌트 내용 이렇게 들어간다.

우리는 import로 각 vue에 적힌 모든 내용을 저 TodoHeaders, TodoList, TodoFooter, TodoInput에 담아두었다.

템플릿에 아래와 같이 적어주면 된다. 아래처럼 케밥케이스으로 표현해주는 것이 vue에서 권장하는 방법이지만 

앞으로는 파스칼케이스로 적어주려고 한다.

사실 todo-header태그는  아래처럼 해당 파일의 모든 내용을 다 저기에 적어주는 것이다.

물론 template쪽은 아래와 같이 보이게 된다. ( 마지막에 뿌려지는 내용 )

input component

인풋 컴포넌트가 하는 역할은 인풋 박스를 하나 만들어서 특정텍스트 값을 입력을 하면 그 값을 로컬스토리지에 저장을 하는 역할이다. ( 원래 자동적으로 로컬스토리지에 저장해주는 것은 아닌 것 같다. 강의에선 setItem사용 )

 

이 인풋에 입력된 값들이 스크립트에서, 즉 뷰에서 인식을 하려면 v-model을 사용하면 된다. v-model은 인풋에 입력된 텍스트 값을 동적으로 바로 뷰 인스턴스에 매핑하는 역할을 한다.

v-model을 데이터와 연결해주어야 한다. 새롭게 입력되는 텍스트를 뉴 투두아이템이라고 한다. 이게 데이터와 연동이 되기 때문에

인풋에 입력을하면 바로바로 

반영이 되는 것을 확인할 수 있다.

반대로 데이터 측에서 변경을 해도

화면에 잘 수정이 되어 반영이 되는 것도 확인할 수 있다. 서로 동기화가 되어있는 것을 확인할 수 있다.

addTodo라는 함수를 만들고 버튼과 연결시켜주면 버튼을 클릭할 때 마다 콘솔창에 현재 newTodoItem의 값이 찍히게 된다.

여기서 this라는 것은 현재 데이터, 메서드가 들어간 이 인스턴스이고,

한마디로 TodoInput, TodoHeader, TodoList, TodoFooter 컴포넌트들이 모든 컴포넌트 들이 App.vue에 등록이 되어있고,

App.vue라는 컴포넌트는 main.js에 등록이 되어 있다. 결과적으로 App컴포넌트는 Vue인스턴스 하나에 다 등록이 되어있다. this를 거슬러 올라가면 똑같은 this를 가리키게 된다. 

 

따라서 input에서 가리키는 this는 현재 todoinput컴포넌트를 가리킨다.

전체적으로는 하나의 Vue인스턴스를 가리키고 좁은 의미로는 현재 컴포넌트를 가리킨다고 보면 될 것 같다.

다른 컴포넌트에 같은 이름으로 데이터를 생성해도, this.'이름'으로 접근하면 현재 컴포넌트에 있는 데이터가 접근이된다. 

 

localStorage에 이 값들을 저장해보자

마찬가지로 메서드에 접근할 때에도 this를 사용해야 한다.

css를 사용할 때 부모컴포넌트든 자식컴포넌트든 상관없이 다 적용이 된다. ( 자식에서 정의한 css는 부모에서 해당이 안될 줄 알았다 하지만 다 적용되었다 )

반드시 해당 안에서만 사용하려면 scoped를 적어주어야한다.

 

input박스에 keyup.enter리스너를 추가해주자. 키가 눌린뒤 엔터를 치면 addTodo가 실행이 되도록 하는 것이다. 기능은 버튼을 눌렀을 때와 같지만 좀더 편하게 사용하기 위해서이다. 

 

TodoList component

TodoList는 우리가 TodoInput에서 적은 값들을 보여주는 역할을 한다.

컴포넌트가 생성될 시점에 localStorage.length 가 1개 라도 있다면 그 key 값들을 하나하나씩 todoList에 넣는다.

그리고 그걸 v-for반복문으로 돌려서 하나씩 표시해주고 있다.