React 생활코딩 - 11. 이벤트 state props 그리고 render 함수

역동성있는 웹페이지를 이벤트로 처리해 만들어보자!

 

 

WEB에 링크를 걸어 HTML이 아닌 웰컴 메시지를 나오게하고

html, css, javaScript를 클릭하면 해당되는 메세지가 나오게 해보기

 

WEB에 해당되는 곳에 링크를 걸어준다.

 

mode 가 welcome일 때 content도 바꿔준다

리액트에서 props/state값이 바뀌면 해당되는 component의 render 함수가

다시 호출되고 render함수 하위에 있는 component로 다시 호출된다

render함수: 어떤 html을 그릴 것인가를 결정한다.

 

state에 mode 추가+

render함수에 렌더링 결과가 달라지게 조건문을 삽입한다.

return된 content에 선언된 var _title 과 _desc를 넣어준다, 물론 중괄호 {} 를 넣어서!

 

그러면 아래처럼 같은 화면이 나온다

 

개발자도구에 들어가서 아래를 read로 바꾸면?

다시 렌더링 되면서 택스트가 아래처럼 바뀐다.

 

 

이제 손으로 직접 조작해 텍스트가 바뀌는게 아니라 WEB을 클릭했을 때 welcome을 출력해보자!

 

 

먼저 subject.js에 있는 header를 그대로 가져오고 원래있었던 것을 주석처리해준다

App.js

 

props를 state로 바꿔준다

 

React는 react만의 규칙이있다

onClick = { } 중괄호로 묶어주기 그리고 alert('hi'); 를 넣어주고 WEB을 클릭 하면

alert가 뜨고 확인을 누르면 페이지가 리로드 된다.

 

리액트는 reload를 하지 않아도 역동적인 웹페이지인데?

그렇다면 a태그를 클릭했을 때 href 의 페이지로 이동한다는 기본적인 것을 못하게 해야한다.

function(e) 를 넣어주고 이를 콘솔로 찍는다 이때 debugger도 같이 넣어준다

debugger은 크롬 개발자 도구에서 브라우저가 debugger라고 되어있는 곳에 멈추고 개발자 도구의 sources라는 페이지에서 여러가지 정보들을 보기 쉽게 해준다.

 

WEB을 클릭하면 아래 화면처럼 나오고 debugger에서 기다려주고 있다

 

funcion의 첫번째 인자로 e 를 주었다

e 는 우리가 이벤트를 핸들링 할 수 있게 주입되는 정보인데 여기서 prevenDefault라는 함수가 이 객체에 속해있다. prevenDefault는 이벤트가 발생하는 태그의 기본적인 동작방법을 못하게 막는다

 

debugger를 지우고 e.prevenDefault(); 를 넣어서 기본적인 a 태그의 동작방법을 막아보자!

 

WEB 즉 a태그를 클릭하면 페이지가 리로딩이 안된다. 그 페이지에 머문다!

 

이제 셋팅된 state와 a태그를 연결 시켜보자!

 

mode 를 welcome으로 바꿔줘야 하는데 아래처럼 하면 오류가 난다

function(e)가 호출됬을 때 실행되는 이 함수 안에서는 this의 값이 component 자기 자신의 값을 가르키지 않고 값이 없다

 

 

이벤트를 설치할 때 this를 찾을 수 없어서 에러가 발생하면 .bind(this)를 함수가 끝난 직후에 추가해줄 수 있다.

그러면 이 함수 안에서 this는 우리의 component가 된다

그리고 다시 WEB을 누르면 아무일도 일어나지 않는다.

welcome 이 출력되지 않는다

왜냐하면 위의 코드는 state값이 바뀌었다는 것을 인지할 수 없다

 

그러므로 this.setState({ 내용 })을 넣어줘야한다.

 

여기서 bind와 setState를 넣어서 해결하였다.