React 공식 문서 읽기 - 3회: 주요 개념(3)

이벤트 처리하기 – React

주요개념 - 6. 이벤트 처리하기부터 시작

---

이벤트를 전달하는 방식

기존 JS에서는 함수명을 담은 문자열을 이용해서 전달했다면,
JSX에서는 함수 자체를 전달할 수 있다.

// JS
<button onclick="activateLasers()">

// JSX
<button onClick={activateLasers}>

---

preventDefault

preventDefault는 이벤트 객체의 메서드다.
기존의 기본 동작을 방지한다.

예를 들어 form에서 submit버튼을 누르면 제출이 된다.
하지만 제출이 되지 않도록 막으려면
e.preventDefault()를 호출하면 된다.

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

---

합성 이벤트

React 이벤트는 브라우저의 이벤트에
React의 추가 함수들이 있다.

합성 이벤트(SyntheticEvent) – React

---

이벤트 핸들러를 바인딩하는 방법

바인딩이란 메서드를 객체에 연결하여
메서드에서 this를 사용할 수 있게 하는 것이다

바인딩의 종류는 아래의 글을 보자.

this | PoiemaWeb

이런 복잡한 this가 React 제작자들이
함수형 컴포넌트를 추천하는 이유 중 하나다.

아무튼 세가지 방법이 있다.

---

1. 생성자에서 초기화

생성자에서 바인딩하는 방법이다.

constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

---

2. (실험적인) 퍼블릭 클래스 필드 문법

예제 코드에서 *실험적인* 문법이라고 표시까지 해뒀다.
아마 정설로 사용되는 방식이 아니라서 자신있게 설명은 못하나보다.

아무튼 여기서 선언된 것은 필드다.
메서드 (클래스에 포함된 함수)가 아닌, 멤버 변수와 같다.
다만 type이 함수인 그런...
(JS를 근본없는 언어라고 싫어하는 사람들 눈치 보는 중)

class LoggingButton extends React.Component {
  // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
  // 주의: 이 문법은 *실험적인* 문법입니다.
  handleClick = () => {
    console.log('this is:', this);
  }
  
  ...

---

3. 콜백에 화살표 함수를 사용

말 그대로 콜백에 화살표 함수를 전달하는 것이다.

<button onClick={() => this.handleClick()}>
  Click me
</button>

이 방식의 장점은 겁나 편하고 코드가 짧다는 것이다.

단점은, 이 컴포넌트가 렌더링될 때마다 다른 콜백이 생성된다.
만약 하위 컴포넌트에 이 콜백을 전달한다면,
re-render가 일어날 수 있다.
(하위 컴포넌트 입장에서는 prop이 바뀐 것이므로)

그래서 이 방법을 지양한다고하는데,
솔직히 너무 편해서 이런게 있다고만 인지하고 써야겠다 ㅎㅎ

---

조건부 렌더링

많은 내용이 있긴 한데 몇가지만 빠르게 짚고 넘어가자

// 엘리먼트 변수: 변수에 React노드 담기
const a = <div>a</div>;

return <>{a}<>;

// 인라인 표현
return (
  <div>
  	{isVisible && <div>a</div>}
  </div>
)

// 삼항연산자
return (
  <div>
    {isVisible
      ? <div>visible</div>
      : <div>invisible</div>
    }
  </div>
);

// 렌더링 막기
// 렌더링만 막는 것이고, 생명주기는 살아있다.
if (!isVisible) {
  return null;
}

---

리스트와 키

이것도 문법에 가까운 내용이라 빠르게 짚어보자

// 리스트 매핑과 key
// key는 형제 사이에서 겹치지 않아야 한다.
return (
  <>
    {numbers.map((number) =>
      <li key={number.toString()}>
        {number}
      </li>
    }
  </>
);

---

마무리

오늘 퇴근하고 프로젝트도 하고 와서 피곤한데, 그래도

너 어차피 할거 없잖아.
공부 안하면 잠도 안 와서 뒹굴거릴거잖아.
공부해서 졸리게 만들어서 잠이나 일찍 자

라는 다소 과격한 마인드로 공부하고 있다.