#5 Event

(필기)

기본적으로 state와 props의 변경은 render()의 호출을 일으킨다.

가장 기본적인 형태의 이벤트(상황에 따라 정적으로 컴포넌트를 render)는 메인 컴포넌트 상단의 조건문에

mode에 따른 분기(ex : welcome, read)를 만들고 매 액션마다 props(혹은 state)를 수동으로 바꾸는 것이다.

이와같은 방식은 매우 원시적이며 우리가 하고자 하는 Event 와는 거리가 멀다.

그렇다면 이를 사용자 액션에 따라 동적으로 만들고자 한다면 어떻게 해야할까? -> JavaScript

onclick의 경우 우리가 알고있는 JS형태로 사용하면 안된다. React Application은 JSX를 기반으로 하기 때문이다.

JSX에서 onclick은 c를 대문자로 해서 onClick과 같이 사용하고 이를 태그의 Attribute에 부여한다.

<a href="/" onClick={function() {
	alert('hello');
}}/>

실제로 위와같은 형태로 작성하면 링크를 클릭했을 때 정상적으로 alert가 띄워지지만 a태그의 기본적인 동작

즉, 페이지가 reload되는 기능 때문에 alert를 닫았을 때 페이지를 다시 렌더링한다(render의 호출)

이와같은 형태로 썼을 때 리액트의 장점(랜더링의 최소화하여 클라이언트의 리소스 부하를 줄이는)을 깨뜨리기 까닭에

올바르게 사용한다면 다음과 같다.

<a href="/" onClick={function(e)={
	e.preventDefault(); alert('hello');
}}/>

JSX에서 Event에 대한 Anonymous-Function은 첫번째 인자로 Event Instance가 올 수 있다.

이 instance의 속성중 preventDefault라는 것이 있는데 이는 본인을 호출하는 태그(caller)의 기본적인 기능을

방지한다. (이 경우 a태그가 페이지를 reload하는 기능)

서두에서 Event의 프로세스가 State나 Props를 수정하며 이루어진다고 했다. 간단하게 생각해서 위의 예제(onClick)

에서 State를 바꾸는 행위를 한다면 이벤트를 만들어내는 것은 굉장히 쉬운 일이다. 하지만 여기서 고려해야 할 것이

두가지 있다. 첫 번째는 해당 Anonymous-Function에 State를 Binding해야 한다는 것. 아래 코드를 보자

// (대충 mode라는 state가 선언된 코드)
<a href="/" onClick={function(e)={
	e.preventDefault(); this.state.mode="hello";
}}/>

일차원적으로 생각하면 이와 같은 코드를 작성했을 때 mode라는 state가 hello로 바뀌어야 하지만 실제로는

그렇지 않다. 그 이유는 onClick에서 this라는 본인 참조 객체가 누구를 가르키는지 모르기 때문이다.

그런 이유로 리액트를 실행하면 undefined 한 객체를 참조했다 라는 오류를 뿜어낸다. 매우 슬픈 일이다.

이러한 문제는 this를 bind 해주면 된다. bind는 해당 객체를 서브 루틴에 매핑해주는 과정이라고 생각하면 된다.

// (대충 mode라는 state가 선언된 코드)
<a href="/" onClick={function(e)={
	e.preventDefault(); this.state.mode="hello";
}.bind(this)}/>

function의 마지막에 bind(this)라고 명시하며 binding 해주었다. 이렇게 하면 모든 문제가 해결된 듯 하지만

이 행위에 두가지 문제가 있다고 했었다. 나머지 하나를 해결해야 한다. 위와 같이 bindng을 해줘봤자

state를 바꿔도 react에서는 state가 바뀐지 모른다. 즉, 런타임에 변경되는 state에 대한 대응이 되지 않은 것.

이는 리액트 공식 문서에서 알려주는 방법대로 하면 된다..-> setState({...})

// (대충 mode라는 state가 선언된 코드)
<a href="/" onClick={function(e)={
	e.preventDefault(); this.setState({
    	mode: 'hello'
    });
}.bind(this)}/>

끝

ARGOS WEB PROJECT