기존 애플리키에션 구조의 문제점 해결하기

현재 애플리케이션 구조의 문제점

• 할 일을 입력했을 때 할 일 목록에 바로 반영되지 않는점
• 할 일을 모두 삭제했을 때 할 일 목록에 바로 반영되지 않는점

종합해 보면 현재 화면을 4개의 영역으로 분리해 놓았기 때문에 한 영역의 처리 결과를

다른 영역에서 감지하지 못한다는 문제가 있습니다. 이름 아래 그림으로 표현하면 다음과 같습니다.

현재 애플리케이션의 문제점

이 문제점을 해결하는 가장 간단한 방법은 컴포넌트를 4개로 분리하지 않고 한 컴포넌트 안에서 데이터 저장, 조회, 삭제를 모두 처리하는 것입니다. 그러면 컴포넌트 간에 처리 결과를 알려줄 필요도 없고 깔끔하게 뷰의 반응성이 적용되어 할 일 목록이 데이터의 입출력에 따라 항상 최신 상태를 유지합니다.

문제 해결을 위한 애플리케이션 구조 개선

데이터 추가와 삭제가 일어날 때 현재 애플리케이션의 구조는 아래와 같습니다.

기존 애플리케이션의 구조

현재 애플리케이션은 각각의 컴포넌트에서만 사용할 수 있는 뷰 데이터 속성을 갖고 있습니다. 그런데 생각해 보면 로컬 스토리지의 todoItems, TodoInput의 newTodoItem, TodoList의 todoItems는 모두

'할 일'이라는 같은 성격의 데이터를 사용하고 있습니다. 만약 모든 컴포넌트가 '같은 데이터 속성'을 조작한다면 화면을 매번 새로 고침해야하는 문제점은 해결할 수 있을 것입니다.

​

같은 데이터 속성을 사용하기 위해 최상위 컴포넌트인 App 컴포넌트에 todoItems라는 데이터를 정의하고, 하위 컴포넌트 TodoList에 props로 전당합니다. 그 구조는 다음 그림과 같습니다.

변경된 애플리케이션의 구조

이전에는 할 일 데이터 추가, 삭제를 모두 하위 컴포넌트 TodoInput, TodoList에서 했었죠. 이제는 뷰 데이터 속성 todoItems와 로컬 스토리지의 데이터 조회, 추가, 삭제를 모두 App 컴포넌트에서 합니다.

그리고 하위 컴포넌트들은 그 데이터를 표현하거나 데이터 조작에 대한 요청만 하는 것이죠.

​

props와 이벤트 전달을 이용해 할 일 입력 기능 개선하기

앞에서 변경한 구조를 코드에 적용해 보겠습니다. 먼저 최상위 컴포넌트인 App 컴포넌트에 데이터 속성 todoItems를 선언합니다. 그리고 뒤에서 사용할 addTodo() 메서드를 추가합니다.

App.vue 파일에 todoItems 데이터 속성과 addTodo() 메서드를 추가한 코드

그리고 선언한 todoItems 속성을 TodoList 컴포넌트에 props로 전달합니다. TodoInput 컴포넌 태그에는 할 일 추가 버튼을 클릭했을 때 App 컴포넌트로 이벤트를 전달할 수 있게 v-on 디렉티브를 추가합니다.

App.vue 파일의 컴포넌트 태그에 props와 이벤트 전달을 위한 v-on 디렉티브 속성 추가

TodoList.vue 파일에 추가한 props 속성

App.vue 파일에 todoItems 데이터 속성을 선언하고, TodoList 컴포넌트의 propsdata 속성에 props로 전달하였습니다.

TodoInput 컴포넌트와 TodoList 컴포넌트 수정하기

props와 이벤트 전달을 적용하기 위해 상위 컴포넌트의 코드를 바꿨으니 이제는 하위 컴포넌트 TodoInput과 TodoList로 수정하겠습니다.

TodoInput.vue 파일의 addTodo() 메서드를 수정한 코드

이제 App 컴포넌트의 addTodo() 메서드에 아래와 같이 추가합니다. 이렇게 변경하고 나서 +버튼을 클릭하면 TodoInput 컴포넌트에서 App 컴포넌트로 신호를 보내 App 컴포넌트의 addTodo() 메서드를 실행합니다.

App.vue 파일의 addTodo() 메서드

addTodo() 메서드의 인자 값 todoItem은 TodoInput 컴포넌트에서 올려 보낸 할 일 텍스트 값입니다. 이 값을 로컬 스토리지에 저장하고, App 컴포넌트의 todoItems 데이터 속성에도 추가합니다.

​

두 번째로, TodoList 컴포넌트의 <template> 내영을 아래와 같이 수정합니다.

TodoList.vue 파일의 v-for 디렉티브 대상 객체를 수정한 코드

TodoList.vue 파일의 v-for 디렉티브 이전 코드

어느 부분이 수정이 되었는지 눈에 들어올 겁니다. 아래에 있는 코드를 위에 있는 사진과 같이 바꿨습니다.

<li> 태그에서 v-for 디렉티브의 반복 대상을 propsdata로 변경하였습니다. 기존에는 TodoList의 데이터 속성인 todoItems였지만, 이제는 App 컴포넌트의 todoItems 데이터의 개수만큼 목록 아이템을 생성합니다. 위 코드를 저장하고 화면에서 할 일을 추가하면 새로 고침을 하지 않고도 목록이 갱신되는 것을 확인할 수 있습니다.

​

TodoList에서 불필요한 코드 제거하기

다음으로 넘어가기 전에 TodoList.vue의 코드를 정리하겠습니다.

TodoList.vue 파일의 <script> 코드

수정 및 제거할 코드

data()에 코드랑 안에 있는 코드는 다 삭제해 주시면 되겠습니다.

created() 코드는 App.vue 파일로 옮기시면 됩니다.

TodoList 컴포넌트에서 사용하던 데이터 속성 todoItems는 이제 불필요하므로 제거합니다. 그리고 컴포넌트가 생성될 때 로컬 스토리지에 저장된 데이터를 모두 불러와 배열에 담아 주던 created() 로직도 App 컴포넌트로 옮깁니다. 왜냐면 이제 할 일 데이터는 모두 App.vue 파일에서 관리하기 때문입니다.

​

지금까지 만든 TodoHeader.vue, TodoInput.vue, TodoList.vue, TodoFooter.vue, App.vue 파일에 코드를 보여드리겠습니다.

TodoHeader.vue

TodoInput.vue

TodoList.vue

TodoFooter.vue

App.vue