🛠️TS로 React Hook 사용하기

MyForm.tsx 파일을 생성한다.

import { useState } from "react";

function MyForm() {
  return (
    <form>
      <input name="name" />
      <input name="desc" />
      <button type="submit">Enter</button>
    </form>
  );
}
export default MyForm;

• input 두 개로 정보를 입력받아서 submit하는 파일

interface MyFormProps {
  onSubmit: (form: { name: string; desc: string }) => void;
}

• 부모 컴포넌트에서 props로 onSubmit 함수를 전달해주려고 한다.
• 그걸 받기 위해 MyForm.tsx파일에서 Props의 형식을 설정해준다.
• 함수명:()⇒반환타입 으로 지정해주어야 한다.

import { useState } from "react";

interface MyFormProps {
  onSubmit: (form: { name: string; desc: string }) => void;
}
function MyForm() {
  const [form, setForm] = useState({
    name: "",
    desc: ""
  });
  return (
    <form>
      <input name="name" />
      <input name="desc" />
      <button type="submit">Enter</button>
    </form>
  );
}
export default MyForm;

• useState로 form의 정보를 담을 state를 생성한다.

const onChange = (e:any) => {  };

<form>
      <input name="name" onChange={onChange} />
      <input name="desc" onChange={onChange} />
      <button type="submit">Enter</button>
    </form>

• input 태그 안의 value값이 변할 때마다 onChange 함수를 통해 접근한다.
• 이때 event는 type을 뭘로 해줘야할 지 정확히 모르기 때문에 any로 작성한다.

import { useState } from "react";

interface MyFormProps {
  onSubmit: (form: { name: string; desc: string }) => void;
}
function MyForm() {
  const [form, setForm] = useState({
    name: "",
    desc: ""
  });
  const { name, desc } = form;

  const onChange = (e: any) => {};
  return (
    <form>
      <input name="name" onChange={onChange} value={name} />
      <input name="desc" onChange={onChange} value={desc} />
      <button type="submit">Enter</button>
    </form>
  );
}
export default MyForm;

• name과 desc라는 변수에 form 값을 구조분해할당하여 input의 각 value값을 지정해준다.

const onChange = (e: any) => {
    const {name, value} = e.target;
    setForm({
      ...form,
      [name]:value,
    })
  };

• e.target을 구조분해할당하여 name과 value 라는 변수를 통해 setForm()을 실행한다.
• 이 때 name에 []를 씌운 이유는 ....아마 프로퍼티로 객체 key에 접근하기 위해서 인 것 같은데 모던JS 다시 보러가자...

import { useState } from "react";

interface MyFormProps {
  onSubmit: (form: { name: string; desc: string }) => void;
}
function MyForm({onSubmit}:MyFormProps) {
  const [form, setForm] = useState({
    name: "",
    desc: ""
  });
  const { name, desc } = form;

  const onChange = (e: any) => {
    const {name, value} = e.target;
    setForm({
      ...form,
      [name]:value,
    })
  };

  const onSubmitForm = (e:any) => {
    e.preventDefault();
    onSubmit(form);
    setForm({
      name:'',
      desc:'',
    })
  }

  return (
    <form onSubmit={onSubmitForm}>
      <input name="name" onChange={onChange} value={name} />
      <input name="desc" onChange={onChange} value={desc} />
      <button type="submit">Enter</button>
    </form>
  );
}
export default MyForm;

• function MyForm({onSubmit}:MyFormProps) 와 같이 작성한다. props의 interface가 MyFormProps라는 것을 의미한다.

const onSubmitForm = (e:any) => {
    e.preventDefault();
    onSubmit(form);
    setForm({
      name:'',
      desc:'',
    })
  }

• props로 받고 있는 onSubmit함수에 form state값을 넘겨주고 있다.
• form을 제출(submit)한 후 state를 초기화하는 코드이다.

🔻 App.tsx

import MyForm from "./MyForm";
export default function App() {
  const onSubmit = (form: { name: string; desc: string }) => {
    console.log(form);
  };

  return <MyForm onSubmit={onSubmit} />;
}

• MyForm을 사용하고 있는 부모 컴포넌트에서 name,desc 속성을 가진 form 객체를 인자로 가진 onSubmit 함수를 넘겨주고 있다.
• 만약 name과 desc를 넘겨주지 않거나, type이 틀리면 에러를 발생시켜준다.

---

MyFormProps를 지정해줌으로써 부모 컴포넌트가 필수적으로 넘겨야 할 props 정보에 대해 직관적으로 알 수 있다.

---

🛠️ Type Assertion

💡 타입 단언 : 타입스크립트가 타입 추론을 통해 판단할 수 있는 타입의 범주를 넘는 경우, 더 이상 추론하지 않도록 지시

🔻 예제

function someFunc(value:string|number, isNumber:boolean):string|number{
    if(isNumber){
        return (value as number).toFixed(2);
    }
    else return (value as string).toLowerCase();
}
console.log(someFunc(2.3456,true)); //2.35
console.log(someFunc("HeLlO",false)); //hello

• value 값이 string일지 number일지 모호하기 때문에 value.toFixed()에서 에러를 내준다.
• 이럴 때 as 키워드를 통해 value 변수의 타입을 단언해줄 수 있다.

---

🛠️ Type Guards

💡 타입 가드 : 타입스크립트가 추론 가능한 특정 범위(scope)에서 타입을 보장할 수 있음

function isNumber(value:string|number):value is number{
    return typeof value === 'number';
}

function someFunc(value:string|number):string|number{
    if(isNumber(value)){
       value = value.toFixed(2);
    }else{
        value = value.toLowerCase();
    }
        return value;
}

console.log(someFunc(234));

• 타입 가드는 NAME is TYPE 형태의 타입 술부(Predicate)를 반환 타입으로 명시한 함수이다.
• 위 예제에서 타입 술부는 value is number 이다.

💡 술부 : 주어의 상태, 성질 따위를 서술하는 말.