이벤트3 [React] 이벤트 처리하기 document.querySelector('button').addEventListener('click', () => { ... })리액트에서는 이런 코드로된 명령형 코드를 사용하지 않는다.대신 리액트에 시키는 선언형 코드를 사용한다.그리고 이벤트 리스너를 요소에 추가하는 대신 해당 요소에 특별한 prop을 추가한다. 내장 요소 props내장 요소(button, input, li 등)는 on으로 시작하는 prop을 많이 지원한다. onClick={}onClick에 제공할 값을 함수여야 한다.이벤트가 발생할 때 실행해야 할 함수를 가리키기 때문이다.function handleClick() { ...} ...특정 이벤트가 발생할 때 호출해야 하는 함수엔 handle~로 시작하게 이름 짓는 것이 일반적이다.함.. 2024. 7. 9. 뷰 컴포넌트 통신 컴포넌트 통신 컴포넌트는 상하위로 관계가 생긴다. 컴포넌트는 각자 고유한 유효 범위를 가지고 데이터도 각각 가지고 있다. 이 데이터를 공유하려면 props와 event 속성을 사용하면 된다. 부모는 자식에게 props(데이터) 속성을 전달하고, 자식은 부모에게 evnet를 전달한다. 왜 부모-자식으로 통신 영역을 제한하는가? 각 컴포넌트가 마음대로 데이터를 주고 받는다면 에러 발생시에 추적하기 어렵게 된다. 뷰는 데이터가 아래로만 내려간다. 이 규칙은 데이터를 흐름을 추적할 수 있게 해준다. 2023. 8. 22. Emit Emit 에밋 emit은 발산, 내뿜다라는 뜻이 있다. 하위 컴포넌트가 상위 컴포넌트와 통신 하기위해서는 하위에서 이벤트를 발생시켜 상위로 올린다. 이벤트를 올릴 때 사용하는 것이 $emit()이다. emit은 뷰에서 제공하는 api(기능)이다. v-on:하위 컴포넌트 이벤트="실행할 상위 컴포넌트 메소드" var appHeader = { template: 'Click me', // 버튼을 클릭했을 때 실행될 함수(메소드) passEvent methods: { passEvent: function() { this.$emit('pass'); // 상위로 보낼 이벤트 pass } } } new Vue({ el: '#app', components: { 'app-header': appHeader }, method.. 2023. 1. 5. 이전 1 다음 반응형