typescript - 함수

typescript에서의 함수 정의

---

// Func.tsx

import React from "react";

import { useState } from "react";

function Func() {

  // TODO: 변수 정의

  let [name, setName] = useState<string>("");

  let [message, setMessage] = useState<string>("");

  // TODO: 함수 정의 : 타입스크립트 적용

  // 매개변수 2개를 전달받아 message 변수에 저장하는 함수

  // getInputVal("안녕하세요", 2023)

  // TODO: 사용법 : const 함수명 = (매개변수: 자료형, ...): 리턴자료형 => {}

  const getInputVal = (arg: string, year: number): void => {

    setMessage(`${arg} 현재는 ${year} 년도 입니다.`); // message(화면 바인딩)

  };

  // 역바인딩(이벤트) 함수 정의

  // TODO: const 함수명 = (event:이벤트자료형...): 함수리턴자료형 => {};

  const onChangName = (event: React.ChangeEvent<HTMLInputElement>): void => {

    setName(event.target.value);

  };

  return (

    <div className="container">

      <input

        className="form-control mt-3 mb-3 w-25"

        type="text"

        name="name"

        value={name}

        onChange={onChangName}

      />

      입력값 : {name}

      <br />

      {/* react 아래 onClick={함수명} // 매개변수가 없는 함수 */}

      {/* TODO: 이벤트 함수에 매개변수가 있으면 화살표함수를 사용해야함 */}

      {/* react 아래 onClick={()=>{함수명(매개변수, 매개변수2)}} // 매개변수가 있는 함수는 화살표함수사용 */}

      <button

        className="btn btn-primary mt-3 mb-3"

        onClick={() => getInputVal("안녕하세요", 2023)}

      >

        입력값

      </button>

      <br />

      {message}

    </div>

  );

}

export default Func;

매개변수를 전달받는 함수정의

const 함수명 = (매개변수:자료형...):리턴자료형 => { };

 

역바인딩(이벤트) 함수 정의

const 함수명 = (event:이벤트자료형) :리턴자료형 => { };

 

이벤트자료형을 쉽게 알아내는 방법

• html 태그 쪽에 있는 onChange에 마우스를 올리면 VScode에서 이벤트자료형을 추천해주는데 위의 붉은색 박스부분을 복사합니다.

• 복사한 내용을 역바인딩 함수의 이벤트 자료형에 붙혀줍니다.
• 단 ChangeEventHandler 부분의 Handler 부분은 삭제해줍니다.

 

연습문제

---

위의 화면처럼 출력해봅시다.

[부트스트랩 cdn]

    <!-- bootstrap css link -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

function FuncExam() {

return (

    <div className="container">

      <input

        className="form-control mt-3 mb-3 w-25"

        type="password"

        name="password"

        value={password}

        onChange={onChangPassword}

      />

      입력값 : {password}

      <br />

      <button

        className="btn btn-primary mt-3 mb-3"

        onClick={() => getInput("안녕하세요", 4, true)}

      >

        입력값

      </button>

      <br />

      {message}

    </div>

  );

}

export default FuncExam;

 

[정답]

  let [password, setPassword] = useState<string>("");

  let [message, setMessage] = useState<string>("");

  const getInput = (arg: string, day: number, bool: boolean): void => {

    setMessage(`${arg} 오늘날짜는 ${day} 일이 맞나요? 답은 ${bool} 입니다.`);

  };

  const onChangPassword = (

    event: React.ChangeEvent<HTMLInputElement>

  ): void => {

    setPassword(event.target.value);

  };