<이벤트, state, props, 그리고 render 함수>
이벤트, state, props가 상호작용하며 애플리케이션을 역동적으로 동작할 수 있게 해 준다.
react에서는 props값이나 state값이 바뀌면 그 state를 가지고 있는 component의 render 함수가 다시 호출된다.
그러면 이 render 함수 하위에 존재하는 components의 render 함수들도 모두 다시 호출된다.
<이벤트 설치>
Subject.js 안의 <h1><a href="/">{this.props.title}</a></h1>을 클릭했을 때, Subject 바깥에 있는 App.js의 state를 바꾸는 것이 최종 목표이다.
일단은 Subject라는 component를 풀어헤쳐 그 내용을 그대로 App.js에 도입해서 이벤트를 구현해보자!
원래 a 태그에는 링크를 눌렀을 때 href 속성이 가리키는 페이지로 이동한다는 기본적인 동작 방법이 존재한다.
그러나 이렇게 되면 링크를 눌렀을 때 reload가 된다. 원하는 것은 reload를 하지 않고도 역동적인 사이트를 만들 수 있도록 이 기본적인 동작을 못하게 하는 것이다.
→ 이벤트 사용
- 이벤트 onClick 사용
- function(e)에서 e : 호출된 function의 첫 번째 인자로 e를 줬고, 이 e가 이벤트를 핸들링할 수 있게 해 준다.
- e.preventDefault(): e라는 객체에 속해 있는 함수로, 그 이벤트가 발생한 태그의 기본적인 동작을 못하게 막는
역할을 한다. (prevent:막는다, default:기본 작동으로 연상)
cf)
1) react는 유사 html이다. (html과 다른 점을 주의하자)
onclick→onClick
2) debugger;
크롬 개발자 도구를 쓸 때 debugger; 코드를 만나면 브라우저가 이 부분에서 실행을 멈추고 sources 페이지로
이동해서 정보를 보기 쉽게 해 준다.
<이벤트에서 state 변경하기>
이제는 전에 작성해놓은 App.js의 state와 추가한 이벤트를 연결해주면 된다.
a 태그를 클릭했을 때 App component의 mode값을 welcome으로 바뀌게 만드려 한다.
→ this.state.mode = ‘welcome’; (오류 발생)
→ 두 가지 문제가 존재한다.
→ (1) 이벤트가 호출되었을 때 실행되는 함수 function(e) 안에서는 this값이 component 자기 자신을 가리키지 않고
아무 값도 설정되어있지 않다 → 함수가 끝난 직후에 .bind(this)를 추가해준다.
(2) react는 state가 바뀌었다는 것을 모른다 → setState() 함수를 호출해 인자로 바꾸고 싶은 값을 입력해준다.
<이벤트 bind 함수>
ex) var obj = {name: ‘egoing’};
function bindTest() {
console.log(this.name);
}
- bindTest.bind(obj); : 내가 미리 만든 bindTest라는 함수에 bind 함수를 또 호출하고 그 인자로 obj를 준다.
그러면 bind 함수로 인해서 bindTest 함수의 블록 안에서 this의 값이 obj가 되고, 이렇게 동작하는 새로운 함수가
만들어지는 것이다.
위의 예에서,
onClick=function(e) {
}.bind(this)
→ onClick에서 bind 함수를 호출해 인자로 this를 주면 App이라고 하는 component 자체를 가리키는
객체를 function 안으로 주입해서, 이 함수 안에서 this는 그 객체가 되게 하는 것이다.
<이벤트 setState 함수>
state값을
this.state.mode='welcome';
이렇게 직접 변경하면 안 되고,
this.setState({
mode:'welcome';
});
setState 함수를 이용해서 변경해야 한다.
→ App component가 생성될 때 가장 먼저 실행되는 constructor 함수에서는 state를 this.state.mode='welcome'
이런 식으로 수정하면 된다. 그러나 이미 component가 생성된 후에 동적으로 state값을 변경할 때는, setState
함수에 변경하고 싶은 값을 객체의 형태로 주는 방식으로 변경해야 한다. (setState를 써주지 않으면 react가 state가
변경된 것을 인지하지 못하기 때문)
