스텝2는 구현은 했는데 과제한다고 미팅에 참가하지 못했다. 그래서 코드리뷰는 못했다🥲
상태
상태관리란 말은 많이 들어봤는데 구체적으로 뭘 의미하는 지는 처음 알았다.
상태란?
- 변하는 데이터
- 이 앱에서 변하는 것이 뭔가? -> 개수, 메뉴명
- 개수는 배열을 사용하기에 length를 사용해 얻을 수 있으니 저장하며 관리할 필요는 없다.
this
스텝2는 로컬스토리지를 사용해 메뉴판을 카테고리 별로 관리할 수 있도록 하는 것이었다. 카테고리 별로 html이 작성되어있고 리스트가 나타났다 사라졌다 하는 것이 아닌, menu-list라는 클래스를 가진 ul태그 하나만 마크업이 된 상태로 로컬스토리지를 사용해 카테고리가 선택될 때 마다 그 카테고리에 해당하는 내용의 li태그를 동적으로 추가해줘야 했다. 강의에서는 key를 카테고리로 value를 상태로 하는 객체를 로컬스토리지에 저장했다.
menu = {
espresso : [],
frappuccino : [],
blended : [],
teavana : [],
desert : [],
}그리고 this를 사용해서 함수안에서 값들을 전달 받았는데 강의에서는 App() 함수 안에 내부 함수로 모든 기능을 넣어서 만들었고 나는 함수들을 모든 기능을 외부 함수로 선언하고 App()에서 호출하는 형태였기에 this는 강의처럼 동작하지 않았다.
이것저것 시도하다 this가 너무 어려워서 결국 this는 공부를 더 해서 사용해보기로 하고, 내가 생각한 방법은 호출된 함수들이 실행 될 때 마다 상태를 getItem하는 것이었다.
문제는 해결했지만 this.....this.......너무 어려워....😢
그리고 this에서 어려운 것도 있지만 강의와 내 코드의 가장 큰 차이점이었던 기능을 내부 함수로 선언하는 것이 어떤 의미가 있는 방법인지도 궁금했기에 그 부분에 대해 유데미 강의에 문의를 남겨보려한다.
강의에서 추천해준 this에 관한 블로그 글
https://blog.rhostem.com/posts/2018-07-20-this-in-javascript
