Props
각 컴포넌트의 속성이 달라져야 할 수 있다. 카드의 형태는 같지만 그 내용이 각가 달라져야하는 경우를 말한다. 그럴 때 Props 를 사용하여 데이터를 전달할 수 있다.
자식 컴포넌트에서 props선언
AppCard.vue
코드 복사하기
→ 자식 컴포넌트 script 태그 내부에서 props로 속성을 배열로 선언
→ 자식 컴포넌트 template 태그 내부에서 {{ }} 중괄호로 변수 사용
•
확인
아직 넘겨받은 값이 없어서 title / contents 가 사라졌음
TheView.vue
코드 복사하기
→ 배열 반응형 데이터 선언 posts
→ v-for 반복문을 반복이 되어야 되는 시작 태그에 선언 “post in posts” 로 사용
→ 데이터가 전달되어야 하는 자식 컴포넌트에 :title , :contents로 반응형 데이터를 바인딩하고
바인딩 값으로 반복문의 post의 속성을 할당한다.
반복문을 사용할 때, 아이디를 :key 로 바인딩하는거 까먹지 말자
•
확인
각 요소가 잘 출력이 되었다.
props 객체 선언 문법
스타일 가이드는 객체를 사용하길 권장한다. 디테일하게 사용할 수 있으므로,
객체를 사용하면, 여러 속성을 상세하게 넣을 수 있다. type / default / required / validator 등의 속성을 정의할 수 있다.
AppCard.vue
코드 복사하
→ props 객체 선언
→ 삼항연산자 사용해서 뉴스 / 공지사항 동적 적용
→ v-if/ v-else문을 사용해서 좋아요 여부 표시
•
확인
아직 동적 적용은 안되고, 일괄적용 되어있다.
TheView.vue
코드 복사하기
→ 객체 속성을 좋아요와 타입을 추가
→ 태그에도 :isLike, :type 으로 바인딩
•
확인
적용 확인
유효성 추가하기
→ 아까 언급했던, 속성으로 validator를 정의할 수 있고, 이 속성으로 유효성 체크를 할 수 있다.
→ value가 들어오면 해당 value가 배열안의 요소인지 검증하는 로직
type에 배열에 속하지 않은 요소를 의도적으로 넣어 보자.
첫 번째 요소의 type에 배열에 없는 요소를 입력해 보자.
•
확인
→ 첫 번째 요소가 뉴스가 아니라 공지사항이 나오게 되었고
→ 개발자 도구 내에는 validaotr check에 fail했다는 문구가 뜬다.
객체나 배열을 사용하는 레퍼런스 함수에는 디폴트를 설정해줘야 된다.
속성에 오브젝트가 들어오면 꼭 디폴트를 설정해줘야되는데,
type을 Object로 설정하고
default를 () ⇒ {} 팩토리 함수를 사용해야된다. (람다식)
props 사용
props는 설정이 되면 template 안에서 바로 사용할 수 있다. 하지만 setup() 함수로 넘길 때는 매개변수에 넣어주면 된다. setup(props)
위 처럼 셋업함수 매개변수로 props를 넘길 수 있다.
•
확인
개발자 도구에서도 잘 찍힌다.
클래스 바인딩
→ 클래스 바인딩으로 로직을 좀 더 명확하게 분리 할 수 있다.
→ computed함수로 변수를 정의 해주고 클래스 바인딩 해서 사용
•
확인
그대로 표현이 잘 되었다.
props의 단방향 속성
props는 부모 객체가 업데이트 되면 자식객체도 같이 업데이트 되지만, 자식객체가 업데이트 되면 부모객체는 업데이트 되지 않는다. 이는 props의 단방향 속성을 나타내는 것인데 자식 객체가 실수로 업데이트 되면서 데이터의 흐름을 이해하기 어렵게 만드는 상황을 방지하게 함이다.
그래서 자식속성을 변경해서 부모속성을 변경하기 위해서는 자식 속성이 이벤트를 부모에게 올려줘서 부모 상태를 변경하고 다시 단방향 데이터 흐름을 타는 것이다.
emit
•
AppCard.vue
→ 좋아요에 @toggleLike 이벤트 리스닝
→ setup함수에 context를 두 번째 인수로 전달할 수 있다.
→ context엔 emit이란 함수가 있는데 이 것이 이벤트를 부모객체로 올려줄 수있다.
→ context.emit(’변수’) 로 변수를 부모객체로 올려준다.
→ 그리고 setup함수 바깥에 emits로 변수를 명시해야된다.
•
TheView.vue
부모 객체인 TheView에서는 자식 객체에서 올려준 이벤트 toggleLike 변수를 케밥케이스로 받을 수 있다. @toggle-like
@toggle-like에 상태를 변환하는 토글로직을 구현해보자.
•
확인
순서 사진 내부 내용 참고