[생활코딩] React - 이벤트 설치 / 이벤트에서 state 변경하기

Subject 안에있는 a 태그를 눌렀을 때 Subject 밖에 있는 App의 state를 바꾸는것이 최종적으로 할거다.

 

---

Subject에 있는 저 부분을 복사해서 App의 Subject 자리에 붙여넣고

아래와 같이 수정한다. 

저 자리에 이벤트 프로그래밍을 할거다.

a라고 하는 링크를 클릭했을 때 어떤 자바스크립트 코드를 실행되게 할거다.

자바스크립트에서는 onclick인데 리액트에서는 onClick이라고 적는다.

 

그리고 문자로 묶는게 아니라 중괄호로 묶는다.

---

리액트는 함수가 실행될 때 함수의 첫 번째 파라미터의 값으로 이벤트라고 하는 객체를 

주입해주기로 약속되어있다.

---

개발자 도구에서 디버거를 만나면 브라우져가 디버거라는 부분에서 실행을 멈추고,

Sources 라는 페이지에서 여러가지 정보들을 보기 쉽게 해준다.

 

 

e라는 객체에 preventDefault 함수가 속해있다.

그러면 태그의 기본적인 동작 방법을 못하게 한다. (a태그를 눌렀을 때 화면이 새로고침 되는 문제)

 

a태그의 기본적인 동작방법을 금지시킨다.

---

<이벤트에서 state 변경하기>

 

이렇게 하게되면 에러가 발생한다.

왜냐하면 여기서 this는 아무값도 가리키지 않는다.

그럴때는 함수가 끝난 직후에 bind를 추가하면 된다.

 

이제 this는 우리 함수안에서 컴퍼넌트가 된다.

---

하지만 클릭을 해도 welcome으로 바뀌지 않는다.

이렇게 코드를 짜면 리액트는 state가 바뀐것을 모른다.

 

그래서 아래와 같이 setState를 사용해야된다.

---

 

 

 

 

 

 

 

 

 

 

 

 

※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.