📚TIL

day34

list rendering

• 상태유지 : 데이터를 변경했을 때 변경된 데이터를 전부 다 DOM에 반영하여 변경하는 것이 아닌 최적화 과정을 거침
• 단방향 데이터 바인딩 : 한쪽 방향에서만 데이터가 연결되며 데이터를 가져와서 출력하는 것만 가능
• 양방향 데이터 바인딩 : v-model을 사용하여 양쪽 방향에서 데이터 연결

v-for

• v-for : 해당하는 요소를 반복하여 배열 데이터를 출력할 수 있음
• 현재 항목에 대한 index 값을 두번째 인수로 받을 수 있음
• v-for를 통해 객체 데이터를 반복하면 value값이 출력됨
• 객체 출력시 두번째인자로 key, 세번째 인자로 value를 받을 수 있음
• 객체데이터는 반복시 key, value의 순서를 보장할 수 없기 때문에 index를 사용하는 것을 지향하는 것이 좋음
• v-for을 사용할 때 고유한 key값을 넣어 줘야 함

배열 변경 감지

• 변이 메소드 : Vue가 감시중인 배열이 변이메소드를 사용하면 반응성 체크를 통해 화면을 갱신 - input요소에 데이터 전달
• 비변이 메소드 : 변이메소드는 메소드가 붙은 배열을 직접 업데이트 시켜주는 반면 비변이 메소드는 새 배열을 반환
• 배열 교체 : vue.js는 새로운 배열이 할당되더라도 기본적인 구조를 파악해서 변경된 부분만 렌더링하기 때문에 효율적

components & customEvnet

• components : 옵션을 통해 컴포넌트로 만들게되면 기능을 독립시켜 재사용성이 가능하며 중요한 기능을 캡슐화시켜서 사용 가능
• 컴포넌트 내에서 커스텀한 이벤트를 만들어 그것이 컴포넌트에서 실행될 때 어떤 메소드를 연결할 것인지 지정할 수 있으며 이벤트와 함께 데이터도 전송할 수 있음
• $emit : 지정하는 메소드의 이름과 실제로 컴포넌트에서 사용하는 이벤트의 이름과 일치시켜서 동작시킴

이벤트 헨들링

• 인라인 메소드 핸들러 : 메소드 이름을 직접 바인딩하지않고 인라인 JS구문에서 메소드를 사용할 수 있음
• 인라인 메소드 핸들러 사용시 이벤트 객체가 필요한 경우 순서에 상관없이 $event를 통해 받아올 수 있음
• 복합 이벤트 핸들러 : 하나의 이벤트에 여러개의 메소드를 적을 경우 실행기호인 ()를 붙여주며 ,나 ;를 통해서 구분해줘야 함

event/ key 수식어

• 이벤트 수식어 : vue.js에서 이벤트 수식어로 v-on 이벤트를 더 쉽게 사용할 수 있음
• stop, prevent, capture, self, once, passive
• passive: 이벤트를 통해서 화면의 렌더링과 동작의 처리를 분리시켜주며 모바일 환경에서 중요하게 사용하는 옵션
• 키 수식어 : vue.js가 키보드 이벤트에 제공하는 수식어
• exact : 연결되어진 해당 수식어만 인지하여 메소드 실행하기 때문에 정확한 조합을 설정할 수 있음
• 마우스 버튼 수식어 : left, right, middle

html로 된 listener를 사용하는 이유

• v-on, @를 사용하여 이벤트 요소에 연결시 얻을 수 있는 이점
• HTML 템플릿을 간단히하여 JS코드 내에서 핸들러 함수 구현을 찾는 것이 더 쉬워짐
• 이는 제어관리가 쉬워지기 때문에 SFC(Single File Components)에서 큰 장점으로 작용
• JS에서 수동연결 하지 않고 요소에 직접 작성하기 때문에 VueModel은 순수 로직과 DOM을 필요로하지 않음
• ViewModel이 파기될 경우 모든 eventListener가 자동으로 제거
• 기능을 추가할 경우 그에 따른 최적화는 vue에서 담당하여 실행

🌊하루를 마치며

오늘 강의는 지난번에 배웠던 v-for심화된 내용과 Vue에서 event를 더 활용도 높게 쓰는 것을 배웠다. javascript에서 event를 사용하면서 많이 접했지만 passive라는 이벤트는 처음 알게됐다. 화면과 동작을 분리시켜주니 사용자는 연산이 많이 드는 부분도 인지하지 않도록 할 수 있다는 점이 좋게 느껴졌다. 사실 컴포넌트와 custom 이벤트 부분이 잘 이해가지 않아 한번 더 공부하고 예제를 작성할 생각이다. 조금은 익숙해졌다고 생각했는데 아직 데이터의 사용이 어렵게 느껴진다. 더 정확히 공부해야겠다.
내일부터 css는 털어내고 vue강의에 몰두할 계획이다! 늦은만큼 더 열심히 강의를 들어야 겠댱