[React/리액트] 리액트 기초 공부 #3 (feat.생활코딩)

(생활코딩 React 2022년 개정판의 총 10개의 강의 중 6편을 보고 작성하였다.)

 

이벤트

 

#헤더 컴포넌트에 이벤트 기능을 넣기

 

첫 번째로, a 태그가 걸려있는 저 WEB을 클릭했을때,

리로드가 일어나지 않도록 이벤트를 걸어줄 것이다.

 

Header함수의 a 태그 안에다 onClick={function(){}}을 입력해 준다.

클릭하면 함수를 실행할 수 있도록 한다.

 

함수의 파라미터로 event를 넣어주고,

함수에다 event.preventDefault();를 작성해 준다

*preventDefault() : 태그의 기본동작을 방지해 준다

 

 

두 번째로, onClick의 함수가 호출되었을 때

Header에 props로 전달된 onchangeMode가 가리키는 함수를 호출하게 할 것이다.

즉, 클릭 시 경고창으로 haeder가 뜨게 할 것이다.

props.onChangeMode()를 Header함수의 onClick 이벤트 함수 안에 추가해 준다.

 

출력된다.

 

 

(화살표 함수로 바꿔주기..)

 

 

 

#네비게이션에 이벤트 넣기

 

nav를 눌렀을 때, id값(이전에 작성했던 1,2,3값들)을 경고창으로 출력되게 해보자

아까와 같이 onChangeMode{}를 적고, {} 안에 (id) => alert(id)를 적어 놓는다.

 

(map으로 하려다 for문이 보기 편해서 for로 대체..)

먼저 아까처럼 a태그 안에다 onClick이벤트를 작성하고, event => {} 함수를 만들어 준다.

(파라미터 값이 한 개일 경우 괄호 생략 가능)

아까처럼 리로드를 방지하기 위해 event.preventDefault(); 입력,

그리고 이제 id값을 불러와 줄 것이다.

아까처럼 props.onChangeMode() 작성

이제 아이디 값을 불러와줘야 한다.

a 에다 id = {t.id}를 작성(반복문으로 인해 자동으로 각각의 li의 id는 차례대로 1,2,3이 됨)

props.onChangeMode()의 괄호 안에다 event.target.id 작성

target은 이벤트를 유발시킨 태그를 가리킨다. 즉, 여기서는 a태그.

타겟된 태그의 id값을 가져오기 위해 .id 를 뒤에 붙여준다

 

 

잘 작동한다.