React 생활코딩 #4

동적 페이지

React에서는 state 값이 바뀌면 그 state를 갖고 있는 Component의 render 함수가 다시 호출된다. 그리고 render함수가 다시 호출됨에 따라서 render 함수 안에 있는 Component의 render함수들도 다시 호출된다.

즉 props나 state의 값이 바뀐다면, 해당되는 render함수가 호출되도록 약속 돼있다. 즉 화면이 다시 그려진다.

render = 어떤 html을 그릴 것인가를 결정하는 함수

state의 mode값에 따라서 동적으로 바뀌는 페이지를 만들었다. 그러나 지금은 state의 mode값을 수동적으로 바꾸어 주어야 하지만, event를 이용하면 자동적으로 바뀌게 할 수 있다.

debugger

debugger를 코드에 두면 실행도중 debugger라는 코드에서 코드의 실행이 멈춘다

원래의 html tag로는 onclick=alert('hi') 가 맞지만, JSX에서는 onClick={function(){alert('hi')}} 로 받는다.

현재의 코드로는 WEB text를 누를 때 마다 페이지가 새로고침 되는데, 이는 원래 의도했던 바가 아니다.

event 주입

onClick에서 function을 호출하면 react에서 event 객체를 넘겨준다. 이 event 객체의 method인 preventDefault()를 사용하면 매번 페이지가 reload 되는 일을 막을 수 있다.