22_03_08_Tue.md

[22.03.08.Tue] - Day 21

Vue.js

• 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하여 좀 더 유연하고 확장성 높이기
  • this.$emit(커스텀 이벤트, 부모 컴포넌트로 전달할 데이터)
  • 커스텀 이벤트는 자식 컴포넌트에만 걸 수 있음 (그냥 아무 태그에 막 걸 수는 없음)
• 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터인 props들은 자식 컴포넌트에서 데이터 변경 불가
  • data 부분은 자식 컴포넌트에서 언제든지 변경 가능 (props는 불가)
• 부모 컴포넌트에서 자식 컴포넌트에 있는 함수 호출 위해서는 ref 속성 활용 (데이터, 메서드 접근 가능)
  • 태그, 컴포넌트 어디에든 다 사용 가능
  • 예) 엑셀 다운로드 기능, ...
• 부모 컴포넌트에서 자식 컴포넌트로 html 구조 전달도 가능
  • 표준화된 레이아웃 컴포넌트로 활용
  • 특정 부분만 바뀌는 경우, 특정 부분만 재정의해서 사용 가능

[Note]

• 최대한 하드 코딩 없이 좋은 재사용 컴포넌트 만들기!
• Vue Lifecycle hooks (성능 개선 위해 잘 활용 가능)
  • 어느 시점에 데이터를 가져올 것인가에 따라 사용자 체감 성능 달라질 수 있음
  • 실무에서 각각의 시점에 어떤 코드를 작성하는 것이 효율적일까???
  • option API - created, mounted, unmounted, data 등 이용하는 기존 방식
  • setup()
    • composition API (Vue 3.0)
      • option API 사용 안하고 구현 가능
      • 한 곳에 다 몰아서 코딩 (가독성 조금 더 낫지 않을까?)
        • 가독성만을 위해 한 곳에 다 모아놓고 구현하면 오히려 가독성이 더 나쁠 수도 있음
        • 각각 구분하는 것이 더 명확할 수 있음
      • mixin 사용 안하면서 mixin의 단점 줄일 수 있는 효과 있긴 함
  • created()
    • 개발자 대신 Vue가 자동으로 호출해줌 (호출 순서가 있음)
  • mounted()
    • 개발자 대신 Vue가 자동으로 호출해줌
  • unmounted()
    • JS 엔진이 G.C를 이용하여 메모리 해제해주는데, 내가 직접 해제하고 싶을 때 활용
      • G.C 대상으로 바로 메모리 해제 시켜줌
• mixin, custom directive, plugin, ... (다음주 수업 예정)

Source Code