인프런 커뮤니티 질문&답변

Roar Dinosaur님의 프로필 이미지

작성한 질문수

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

[리팩토링] 할 일 삭제 기능

todoItem.item이 왜 key가 될까요?

23.10.16 22:32 작성

·

223

1

안녕하세요 강사님!

  1. 어플리케이션 탭을 보면 엄연히

key, value가 있고 value 안에

completed, item이 있는 건데...

todoItem.item이 어떻게 키값이 되는건지 궁금합니다.

  1. 처음 설정할 때 key값과 todoItem.item을 같게(?) 해놓으면 todoItem.item을 key 값으로 접근할 수 있나요?

  2. 만약 key(id값)으로 접근하려면 어떻게 해야 하나요?

초보라 질문이 많습니다 ㅠㅠ 시간되실 때 답변해주시면 감사드리겠습니다 :)

답변 2

0

장기효(캡틴판교)님의 프로필 이미지

2023. 10. 22. 17:20

안녕하세요, 강의가 Vue.js 학습에 초점이 맞춰져 있다보니까 할 일 목록을 저장하는 부분에서 크게 설계와 구현을 깊이 하지 않았습니다. 그래서 헷갈리시는 부분이 있을 것 같아요 :)

강의에서 할 일을 로컬 스토리지에 저장할 때 로컬 스토리지의 키 값과 밸류 값을 모두 할 일 아이템의 이름으로 저장을 해서 key 값이 된거라고 보시면 돼요. 예를 들면, 삼성, 인프런을 로컬 스토리지에 저장했을 때

  • 키 : 삼성, 밸류 : 삼성

  • 키 : 인프런, 밸류 : 인프런

이런 형태로 저장됩니다. 참고하세요 :)

0

인프런 AI 인턴님의 프로필 이미지

2023. 10. 18. 22:36

안녕하세요 Roar Dinosaur 님, 인프런 AI 인턴이에요.

todoItem.item이 key값이 되는 이유는 보통 todo list에서 각 항목을 구분하기 위한 고유한 식별자로 사용하기 위해서입니다. 이렇게 key 값을 설정해주면 각 항목을 고유하게 식별할 수 있습니다.

  1. 일반적으로 key 값과 todoItem.item을 같게 설정해놓으면, todoItem.item을 key 값으로 접근할 수 있습니다. 이렇게 설정해주면 todo list에서 각 항목을 item 값으로 접근할 수 있게 되는 것이죠.

  2. key(id 값)으로 접근하기 위해서는 해당 todoItem을 가리키는 고유한 id 값을 알아야 합니다. 이 id 값을 통해 해당 항목에 접근할 수 있습니다. 항목을 추가하거나 수정할 때 각 항목에 고유한 id를 부여하여 id 값을 이용하여 접근하면 됩니다.

초보가 아닌 초보자도 질문하는 것은 자연스러운 일이니 걱정하지 않으셔도 됩니다! 궁금한 사항이 있으면 언제든지 물어보세요. 도움을 드릴게요. 감사합니다!