25. React - 12 main concepts(Handling Events)

(+ React에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된  내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :))

앞서 

React의 주요 개념 중

5. State & Lifecyclev

에 대해서 정리해 보았다.  

 

이번에는 

React의 주요 개념 중

6. Handling Events

에 대해서 정리해볼 것이다. 

 

React의 주요 개념들

6)  Handling Events

앞에서 정리한 순서대로

' react 개발환경 설치 → Component 제작 → Props의 사용 → state의 사용' 등을 해서 

이런 결과창을 띄우는 것 까지 했다고 가정해보자. 그런데 아무런 event를 등록 해주지 않아서, 리스트에 각각의 링크를 클릭 하더라도 아무 일도 일어나지 않는다.

그래서 지금부터는 React에서 event를 부여하는 방법에 대해서 정리해볼 것이다. 

 

React를 배우기 전까지는 DOM Element를 이용해서 이벤트를 처리했다. 앞서 React는 "Virtual DOM을 통한 rendering! React는 virtual DOM을 통해 변화를 가상 DOM에 먼저 적용한 후, 비교를 통해변화된 부분만 render하므로 연산을 줄여준다." 라고도 했었다. 

 

그러나 React Element에서 이벤트를 처리하는 방법과 DOM 엘리먼트에서 이벤트를 처리하는 방법에는 몇 가지 문법 차이가 있다.

- React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용 ex) onclick  →  onClick

- 문자열로 함수를 전달하지 않고 JSX를 사용 ex) onclick="activateLasers()" → onClick={activateLasers}

- 반드시 preventDefault를 명시적으로 호출 

※ preventDefault란?

'기본 동작 방지'를 위한 것이라고 생각하면 된다. 예를 들어,

<header>
      <h1>
         <a
              href="/"
              onClick={function (e) {
                alert('Good morning')
              }}
         >
      	</a>
     </h1>
</header>

이런 코드가 있다고 해보자. 

실행시키면, 잘 되긴하는데, 문제가 하나 있다. 그게 뭐냐면, alert창의 okay를 누르면 페이지가 다시 Reloade된다. 왜냐면 <a> 태그는 href가 가리키는 페이지로 이동한다는 기본 동작이 있기 때문이다. 

 

react에서는 event가 실행될 때(onClick의 함수가 호출 될 때) 콜백 함수의 첫 번째 매개변수의 값으로 event라는 객체를 인자로 전달한다. 그래서 console.log(e)라고 찍어보면 

Class {dispatchConfig: {…}, _targetInst: FiberNode, _dispatchInstances: FiberNode, nativeEvent: MouseEvent, _dispatchListeners: ƒ, …} 이런 객체 형식의 event가 출력된다. 

이 중 preventDefault 메서드가 있고, e.preventDefault는 event가 발생한 태그의 기본적인 동작방법을 막는 것이다. 

 

이를 이용해서 위의 코드에서 <a> 태그에서 href가 가리키는 페이지로 이동하는 기본 동작을 방지할 수 있도록 다시 짜보면, 

<header>
      <h1>
         <a
              href="/"
              onClick={function (e) {
              	e.preventDefault()
                alert('Good morning')
              }}
         >
      	</a>
     </h1>
</header>

 

가 된다. 

 

지금까지 React Element에서 이벤트를 처리하는 방법과 문법에 대해서 정리해보았다. 

그럼 이벤트 결과로 동적 프로그래밍이 가능하게 하는 것을 '클릭할 때마다 어떤 특정한 this.state.mode로 바뀌도록 하는' 예시 코드를 통해 살펴보자. 

 

※ 그 전에 앞서 React에서 state 에 접근하여 값을 바꾸려면(업데이트 하려면)?? 

state 값을 변경하려고 한다면,setState메서드를 이용한다. 그리고 setState 메서드를 사용해서 state값을 변경하면, render()함수가 다시 실행된다.

<header>
          <h1>
            <a
              href="/"
              onClick={function (e) {
                this.setState({
                  mode: 'welcome',
                })
              }}
            >
            </a>
          </h1>

</header>

이렇게 하면 될까?? 아니다!! 이 때 this는 (우리가 원하는건 이 this가 지금 component를 가리키면 좋겠지만) 아무것도 가리키고 있지 않아서 undefined라고 한다. 그래서 event뒤에 .bind(this)를 적어 줌으로써 this가 지금 component를 가리킬 수 있도록 해야 한다.

 

그래서 올바른 '클릭할 때마다 어떤 특정한 this.state.mode로 바뀌도록 하는' 이벤트 결과로 인한 동적 프로그래밍 코드는

<header>
          <h1>
            <a
              href="/"
              onClick={function (e) {
                this.setState({
                  mode: 'welcome',
                })
              }.bind(this)}
            >
            </a>
          </h1>

</header>

이다. 

 

 

 

 

 

reference

ko.reactjs.org/docs/handling-events.html

상현님 블로깅 글