REACT Chapter 05

5-1. 이벤트 연결하기

1) JSX에서 함수 연결

JSX에서 camelCase 형태의 속성에 함수를 전달

<button onClick={handleClick}>
	Button
</button>

React 컴포넌트의 상태에 변화를 주는 것 = 이벤트
React에서는 모두 소문자인 onclick이 아니라 camelCase 규칙에 따라 가운데 C가 대문자인 onClick 속성에 이벤트 함수 추가 -> 버튼이 클릭되었을 때 handleClick 함수 실행

2) HTML과 차이점
HTML에서는 소문자 onclick에 실행할 코드 자체를 넣어줬지만, React에서는 camelCase의 onClick에 실행할 함수 추가

3) 실습

import { useCallback } from "react";

// 컴포넌트 외부에 함수 선언
function handleClick2(e) {
  console.log("click2", e);
}

function App() {
  /**
   * ℹ️합성 이벤트 (SyntheticEvent)
   * - React에서 이벤트가 발생할 때, 이벤트 핸들러의 인자로 합성 이벤트 객체가 전달됨
   * - 이 합성 이벤트는 javascript 에서 전달 받는 이벤트 객체를 확장(래핑)한 객체임
   *   (거의 동일한 인터페이스를 가지고 있음)
   * - 원본 이벤트 객체(native event)는 syntheticEvent.nativeEvent 에 있음
   * - 지금은 그냥 같은 이벤트 객체라고 생각해도 무방
   */
  function handleClick1(e) {
    console.log("click1", e);
  }

  /**
   * ℹ️이벤트 핸들러(함수)를 만들 때는 react lifecycle을 고려하자!
   *  - 컴포넌트가 리랜더링 되면 컴포넌트 내에서 단순 정의한 함수가 새로운 함수로 만들어짐
   *  - 이것은 불필요한 작업으로 성능 문제를 야기함
   *  - 그래서 함수의 정의를 최대한 컴포넌트 밖으로 빼거나,
   *    useCallback으로 감싸줘서 매 랜더링 마다 새로 만들어지지 않도록 해줄 필요가 있음
   */
  const handleChange = useCallback((e) => {
    console.log("change", e.target.value);
  }, []);

  return (
    <div>
      <button onClick={handleClick1}>Button1</button>
      <button onClick={handleClick2}>Button2</button>
      <div>
        <input type="text" onChange={handleChange} />
      </div>
    </div>
  );
}

export default App;

5-2. 이벤트 종류

1) 활용 가능한 이벤트의 종류

1. 마우스와 관련된 이벤트

• onClick : 마우스 버튼을 클릭했을 때 발생(Down + Up)
• onMouseDown : 마우스 버튼을 눌렀을 때 발생
• onMouseUp : 마우스 버튼을 떼었을 때 발생
• onMouseEnter : 요소 밖에서 안으로 마우스 커서가 들어갔을 때 발생
• onMouseLeave : 요소 안에서 밖으로 마우스 커서가 나갔을 때 발생
• onMouseMove : 요소 안에서 마우스 커서를 움직였을 때 발생

2. 키보드와 관련된 이벤트

• onKeyDown : 키를 눌렀을 때 발생(물리적인 키에 반응)
• onKeyUp : 키를 떼었을 때 발생
• onKeyPress : 키를 눌러서 문자가 입력되었을 때 발생 (눌린 문자에 반응)

3. Focus 이벤트와 Form 관련 이벤트

Focus 이벤트

• onFocus : 요소가 포커스 될 때 발생
• onBlur : 요소의 포커스가 사라졌을 때 발생

Form 이벤트

• onChange : 요소의 값이 변경되었을 때 발생

2) 이벤트 실습

function App() {
  return (
    <div className="App">
      <button
        onClick={() => {
          console.log('onClick');
        }}
        onMouseDown={() => {
          console.log('onMouseDown');
        }}
        onMouseUp={() => {
          console.log('onMouseUp');
        }}
      >
        Button
      </button>
      <div
        className="box"
        onClick={() => {
          console.log('onClick');
        }}
        onMouseEnter={() => {
          console.log('onMouseEnter');
        }}
        onMouseLeave={() => {
          console.log('onMouseLeave');
        }}
        onMouseMove={() => {
          console.log('onMouseMove');
        }}
      ></div>
      <div>
        <input
          type="text"
          onKeyDown={() => {
            console.log('onKeyDown');
          }}
          onKeyUp={() => {
            console.log('onKeyUp');
          }}
          onKeyPress={() => {
            console.log('onKeyPress');
          }}
          onFocus={() => {
            console.log('onFocus');
          }}
          onBlur={() => {
            console.log('onBlur');
          }}
          onChange={() => {
            console.log('onChange');
          }}
        />
      </div>
    </div>
  );
}

export default App;

5-3.Form

1) Form 요소 컨트롤 패턴

• Controlled Component의 개념 = React에 의해 입력 요소의 값이 제어되는 컴포넌트

  • TextInput이라는 컴포넌트가 input 요소를 렌더링하는 것
    = value 속성에 text라는 state가 있다는 것
  • onChange 이벤트 text 값을 입력 값으로 셋팅하는 setText 함수를 호출
    사용자가 값을 입력 -> text에 바로 입력한 값이 반영 -> 상태 업데이트
  • Controlled Component는 state를 직접 input 요소의 value에 연결시켜 주기 때문에 그 둘은 완전히 동일한 값

  function TextInput() {
  	const[text, setText] = useState('');
  
      return (
      	<input
          	type="text"
              value={text}
              onChange={(e) => {
              	setText(e.target.value);
              }}
          />
      );
  }

  장점

  • 컴포넌트의 state와 input value가 완전히 동일한 값을 갖음 (신뢰 가능한 단일 출처
  • 다른 컴포넌트에 input value를 전달하거나 다른 이벤트 핸들러에서 값을 재설정 할 수 있음

  단점

  • 값이 변경되는 매 순간 렌더링이 됨(해당 컴포넌트의 영향 범위가 클 수록 성능 저하)

  Uncontrolled Component

  • React에 의해 입력 요소의 값이 제어되는 컴포넌트