[React] Handler

Handler

• 사용자와의 상호작용을 처리하기 위한 함수
• UI(사용자 인터페이스)에서 발생하는 이벤트에 반응하여 동작되는 기능을 정의

interface ConsoleProps {
  message: string;
  children: React.ReactNode; // HTML 요소 + 사용자 정의 컴포넌트
}

// 자식 컴포넌트
// >> 부모 컴포넌트에서 속성으로 문자열 message의 값과
//    해당 컴포넌트 태그들 사이에 내용을 전달받음
function ConsoleButton({ message, children }: ConsoleProps) {
  return (
    <button
      onClick={() => {
        console.log(`${message}`);
      }}
    >
      {children}
    </button>
  );
}

export default function Handler01() {
  function handleButtonClick() {
    console.log("버튼을 클릭하였습니다.");
  }
  return (
    <div>
      {/* 
        버튼 요소에 이벤트 등록 
        >> prop에 이벤트를 '전달'
        >> on속성으로 작성 - 속성의 중괄호 내에 JS기능을 명시(이벤트 핸들러)

        +) 이벤트 핸들러의 함수는 호출 x, 등록되어야 한다
      */}
      <button onClick={handleButtonClick}>클릭</button>

      <button
        onClick={function () {
          console.log("버튼 클릭2");
        }}
      >
        클릭2
      </button>

      <button
        onClick={() => {
          console.log("버튼 클릭3");
        }}
      >
        클릭3
      </button>

      {/* 핸들러에 데이터 전달 */}
      <ConsoleButton message="A를 동작">
        {/* ReactNode를 전달 할 경우 HTML 요소의 '내용' 전달 가능 */}
        A를 동작시키는 버튼
      </ConsoleButton>
      <ConsoleButton message="B를 동작">
        {/* ReactNode를 전달 할 경우 HTML 요소의 '내용' 전달 가능 */}
        B를 동작시키는 버튼
        <p>안녕</p>
      </ConsoleButton>
    </div>
  );
}

import React, { useState } from 'react'

// 자식 컴포넌트
// : 부모 컴포넌트에서 사용되며 부모로 부터 count 값을 전달받아 UI로 출력
// >> p요소 내에 count 변수값을 작성
export function ChildComponent({ count } : { count: number }) {

  return(
    <p style={{color: 'orange'}}>{count}</p>
  )
}

// 부모 컴포넌트
// : counter UI 작성
// >> 버튼 2가지를 생성하여 클릭 시 count 값이 변경
//  : 변경된 count값은 자식 컴포넌트에게 전달
export default function Handler02() {
  const[count, setCount] = useState<number>(0);
  return (
    <div>
      <button onClick={() => {setCount(count + 1)}}>증가</button>
      <button onClick={() => {setCount(count - 1)}}>감소</button>

      <ChildComponent count={count} />
    </div>
  )
}

import React from 'react'

// 이벤트 핸들러 - Props 전달

//! 이벤트 핸들러 prop의 이름 지정 방법
// : on- 시작
// >> on 다음에는 이벤트 설명 키워드 작성 (시작은 대문자)
// EX) onButtonClick, onIncrementClick, onInputChange

interface ButtonProps {
  children: React.ReactNode;
  onButtonClick: () => void; // 매개변수 X, 반환값 X
}

// 자식 컴포넌트
function Button({ children, onButtonClick }: ButtonProps) {
  return(
    // onClick 이벤트 속성에 부모로부터 전달 받은 onButtonClick 함수 전달
    <button onClick={onButtonClick}>
      {children}
    </button>
  )
}

export default function Handler03() {
  const buttonHandler = () => {
    console.log('버튼 클릭');
  }
  return (
    <div>
      <Button onButtonClick={buttonHandler}>
        이벤트 핸들러(기능 전달)
      </Button>

      <hr />
      {/* 기본 동작 방지 */}
      <form action="" onSubmit={(e) => {
          e.preventDefault();
          console.log('전송완료 - 기본동작은 방지')}}>

        <input type="text" />

        <select name="" id="">
          <option value=""></option>
        </select>
        {/* 
        onSubmit 핸들러의 경우 기본으로 데이터를 전송하고 새로고침 하는 기능을 가짐 
        */}
        <button type='submit'>전송</button>
      </form>
    </div>
  )
}