강사님 질문 네개있어요!!

import axios from 'axios';
import Link from 'next/link';
import { useRouter } from 'next/router';
import React, { FormEvent, useState } from 'react';
import InputGroup from '../components/InputGrout';

// 1. 타입 명시안해줘도 괜찮은걸까요?
// InputGrout.tsx에는 const InputGroup: React.FC<InputGroupProps> .. 이런식으로 명시해주셨는데
// 여기에는 타입 들어갈 만한게 없어서 작성을안해주신걸까요?
// 있는게 불편하지않다 싶으면 const Register:React.FC = ()=> {} 이정도로만 해줘도 괜찮을까요?
const Register = () => {
  // email,username,password의 useState도 타입명시를 해줘도되고 안해줘도될까요?
  const [email, setEmail] = useState('');
  const [userName, setUserName] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState<any>({});

  // 3. const 대신 let을 사용해주신 이유가 궁금합니다!
  let router = useRouter();

  // 4. 코드가 몇줄 안되서 handleSubmit함수에서 비동기통신을해주고 사용해주시는데 이부분을 그냥 모듈(?)처럼 따로 빼서 사용해도될까요?
  //    강사님은 어떤 방식을 추천하시는지 궁금합니다.
  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();

    try {
      // 4번질문의 코드부분
      const res = await axios.post('/auth/register', {
        email,
        userName,
        password,
      });
      console.log('res', res);
      router.push('/login');
    } catch (error: any) {
      console.log('error', error);
      setErrors(error.response.data || {});
    }
  };

  return (
    <div className='bg-white'>
      <div className='flex flex-col items-center justify-center h-screen p-6'>
        <div className='w-10/12 mx-auto md:w-96'>
          <h1 className='mb-2 text-lg font-medium'>회원가입</h1>
          <form onSubmit={handleSubmit}>
            <InputGroup
              placeholder='Email'
              value={email}
              setValue={setEmail}
              error={errors.email}
            />

            <InputGroup
              placeholder='Username'
              value={userName}
              setValue={setUserName}
              error={errors.email}
            />

            <InputGroup
              placeholder='Password'
              value={password}
              setValue={setPassword}
              error={errors.email}
            />
            <button
              className='w-full py-2 mb-1 text-xs font-bold text-white uppercase
          bg-gray-400 border-gray-400 rounded'
            >
              회원 가입
            </button>
          </form>

          <small>
            이미 가입하셨나요?
            <Link href='/login' legacyBehavior>
              <a className='ml-1 text-blue-500 uppercase'>로그인</a>
            </Link>
          </small>
        </div>
      </div>
    </div>
  );
};

export default Register;

강사님 질문이 네개있는데 코드랑 같이 질문드리고싶어서 주석으로 질문 드렸습니다!
타입스크립트 기초지식이 없어서 좀 버벅이네요!ㅠㅠ
항상 친절하게 설명해주셔서 정말 감사합니다..

인프런 커뮤니티 질문&답변