-
[React.js] 리액트의 이벤트 작성리액트 2022. 9. 5. 14:41
<Header></Header>
<Nav></Nav>
<Article></Article>
3개의 태그 중에 빨간색 박스로 표시된 <Nav> 태그를 보자.
태그 안에 topics와 onChangeMode가 보이는데 화면의 <Nav> 태그에서 당장 실행되는게 아니라
태그로 설정된 html 부분에 props로 값을 넘겨주는 역할을 한다.
그림이 허접한데 대략 이런 느낌이다.
작성된 태그로 표현하면
function Nav(props) {} 내부에 보면 <a>태그 안에 onClick 기능을 만들어서
onChangeMode 기능을 수행한다.
event.preventDefault();는 쉽게 말해서 새로고침을 막아주는 것이다.
구현할 기능은 간단한 알람창이 뜨는 기능인데 이것을 위해서
문서를 재랜더링 할 필요가 없기 때문이다.
여기서 event.target은 이벤트를 발생시킨 주체.
즉 event가 일어나게 만든 원인인 a 태그를 말하는데(설명이 묘하다)
a태그에서 id로 설정한 {t.id}를 클릭 할 때마다 보여준다.
...
그냥 태그 누를 때마다 알람창으로 1, 2, 3 뜨는거다.
이렇게 ^ㅁ^
'리액트' 카테고리의 다른 글
[React.js] 리액트의 Update 기능 (0) 2022.09.12 [React.js] 리액트의 Create 기능 (0) 2022.09.12 [React.js] 리액트의 State 기능 (0) 2022.09.05 [React.js] 'create-react-app'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. (0) 2022.09.05 [React.js] cannot create a project named (0) 2022.08.29