Slot 부모가 어떠한 template을 내려주면 자식이 slot 키워드를 이용해서 outlet처럼 사용할 수 있다! 부모가 내려준 template을 자식이 사용한다는 의미에용 문법이 헷갈릴 수 있는 개념이므로 예시를 통해 익혀보자! 부모 컴포넌트 기존에 부모가 자식 컴포넌트를 불러온 방식과는 약간 다르게? 자식 컴포넌트 사이에 어떠한 template을 넣어주고 있다! I'm fragment from parent 자식 컴포넌트가 slot이라는 키워드를 사용해서 부모 컴포넌트가 내려준 template을 사용할 수 있다! I'm slot child! Parent didn't provide any fragment 자식이 이라고 적어둔 부분에 부모 컴포넌트에서 내려준 I'm fragment from parent..

emit emit은 데이터의 흐름이 prop과 다르다. emit은 자식 컴포넌트가 부모 컴포넌트에게 데이터를 보낸다. 부모 컴포넌트의 state를 prop으로 받고 자식 컴포넌트에서 emit으로 이벤트를 사용하면 two-way-binding!! 자식이 사용할 이벤트핸들러 function을 부모가 사용할 이름을 달아서 emit한 후 부모가 이 function을 커스텀해서 사용할 수 있다. 또한, 파라미터로 데이터를 넣어서 보내서 부모가 이 데이터를 사용해서 state를 변경하거나 사용할 수 있다! 사용법 자식 컴포넌트 자식 컴포넌트 methods 부분에 이벤트핸들러로 사용할 function을 작성한 후 emit 키워드를 사용한다. 이 때, 부모가 v-on으로 사용할 이벤트의 이름을 넣어준다! 자식 컴포넌트..

Prop으로 function 넘기기 기존에는 React로 개발을 해왔기 때문에 부모에서 미리 자신의 상태를 변화시킬 function을 작성해서 props로 넘겨주고 자식에서 props로 받은 function을 이용해서 부모의 상태를 변경하는 방식이 익숙했었다. Vue.js도 prop으로 부모의 상태를 변경시키는 function을 받아서 자식 컴포넌트가 해당 function을 호출해서 부모의 상태를 변경하는 방식이 가능하다. 아래 예시를 살펴보자! button 사용할 때 부모 컴포넌트 부모 컴포넌트에서 미리 자신의 상태를 변경시키는 function을 작성해서 자식 컴포넌트에게 넘겨준다. {{ state }} 자식 컴포넌트 자식 컴포넌트는 부모 컴포넌트로부터 function을 받아서 이벤트리스너로 사용하면 ..

v-for Vue.js에서 특정 엘리먼트를 여러번 반복해서 렌더링하기 위해 v-for를 사용할 수 있다. React와 굉장히 유사한 점이 있는데 역시 Vue.js도 Virtual Dom을 사용하기 때문에 성능을 위해 array의 변화를 감지해서 바뀐 부분만 렌더링하기 위하여 key라는 특별한 프로퍼티를 사용한다. 꼭 써! 사용법 v-for 문법으로 array의 요소에 대해 반복문을 실행할 수 있고 {{ item.name }} 아래와 같이 파이썬 문법과 비슷하게 요소와 인덱스를 같이 반복문에서 실행할 수 있다. 두 경우 모두 v-bind를 이용해 key에 고유한 값을 넣어줘야 한다!! {{ item }}{{ idx }} 아래 예시를 통해 좀 더 자세히 살펴보자. people이라는 object가 요소인 ar..