[React] 이벤트

0. 이벤트 state props 그리고 render 함수

• event, state, props 3개가 서로 상호작용하면서 앱의 역동성을 만든다.
• React에서는 props의 값이나 state값이 바뀌면 해당되는 컴포넌트의 render함수가 호출되도록 약속 되어 있다. 그 얘기는 props나 state가 바뀌면 화면이 다시 그려진다는 것이다.
• 각각의 요소를 클릭하면 그 요소에 대한 content가 출력이 되도록 해보겠다.
• 아래는 코드 화면이다.

• 아래는 mode가 welcome일때의 웹페이지 화면이다.

• 아래는 mode가 read일 때 웹페이지 화면이다. 여기서 React 개발자 도구에 들어간 후 직접 값을 변경할 수 있다.

---

1. 이벤트 설치

• <Subject>태그에 이벤트 설치를 해보겠다.
• Subject.js에서 하는 것은 복잡하기 때문에 App.js로 코드를 직접 써준다음 설치해보겠다.
• onClick을 통하여 링크를 클릭할 때 동작하는 함수를 적어준다.
• alert('hi') 라는 코드는 'hi'라는 경고창을 띄워주는데 문제는 경고창 뜬 후 '확인' 버튼을 누르면 화면이 Reload된다. 그것은 React에서 지양하는 것이다.
• 따라서 기본적인 태그의 기능을 못하게 하는 코드를 작성해준다.
• e.preventDefault() -> 기본적인 태그의 기능을 못하게 한다.

• 결과화면
• '확인' 버튼을 눌러도 화면이 Reload 되지 않는다.

---

2. 이벤트에서 state 변경하기

• 이벤트에서 state를 변경하기 위해 this.state.mode='welcome'이라는 코드를 작성하였다. 그러나 Error 발생.
• 이벤트가 호출 됐을 때 함수 안에서는 this의 값이 컴포넌트 자기 자신을 가리키지 않고 아무값도 세팅되어 있지 않다. 그래서 undefined의 state를 읽으려고 했더니 할 수 없다는 Error 가 뜬 것이다.
• 그래서 this를 찾을 수 없는 문제에 대한 해결책으로 함수가 끝난 직후에 .bind(this) 를 붙여준다. 그러면 그 함수안에서 this는 컴포넌트를 가리키게 된다.
• 그런데 .bind(this)를 붙였는데도 불구하고 페이지가 바뀌지 않는다.
• 왜냐하면 그렇게 코드를 짜면 React는 State가 바뀐지 모른다. React 설명서에 따르면 state를 설정하기 위해서는 setState를 사용해야한다.
• 아래와 같이 완성된 코드를 실행시키면 Error없이 정상 작동한다.

• 아래 웹페이지에서 WEB을 클릭해보겠다.

• 아래는 결과화면이다. 'hi'라는 경고창이 뜨고 '확인' 버튼을 누르면 Reload되지 않고 mode가 welcome으로 바뀐 것을 볼 수 있다.

---

3. 이벤트 bind 함수

• render함수안에서 this는 render함수가 속해있는 컴포넌트 자체를 가리키는데 이벤트에 속해있는 함수는 이상하게도 this가 아무값도 없다.(원리는 잘 모르겠음. 그래도 강제로 this를 주입하는 방법을 사용해서 해결 가능)
• bind함수를 통해 강제로 this를 주입해줌.
• 아래 이미지의 Console을 보면 bind의 기능을 볼 수 있다.

---

4. 이벤트 setState 함수

• setState함수를 사용하지 않고 state를 변경하는 방법은 React 몰래 바꾸겠다는 것과 같은 말이다.
• 그렇게 되면 안되므로 setState를 사용하여 바꿔야한다. 그러나 constructor에서는 setState를 사용하지 않고 그냥 바꿔도 문제가 없다.