React with TS

React

FunctionComponent

interface P {
    name: string,
    title: string,
}

// ReactElement는 굳이 안해도 된다.
const WordRelay: FunctionComponent<P> = (): ReactElement => {
}

FC가 FunctionComponet의 줄임말이다.

 

리액트 17버전에서는 VFC도 있었는데 18버전에서는 사라졌다. VFC와 FC의 차이는 VFC는 children이 없고 FC는 childrend이 있다.

 

따라서 FC children를 사용하고 싶다면

interface P {
    name: string,
    title: string,
    children?: ReactNode | undefined;
}

const WordRelay: FC<P> = (): ReactElement => { 
}

이렇게 children에 저 타입을 주면 된다.

useState

useState에도 함수를 줄 수 있다. 예를 들면 복잡한 함수를 사용할 때 사용하면 좋다. 왜냐하면 리렌더링 될 때 useState에 있는 값은 변하지 않아서 복잡한 함수가 한번만 실행되면 된다.

    const [word, setWord] = useState(()=>{return 복잡한함수();});

    useEffect(() => {
        setWord((prev: string) => {
            return prev+'2';
        })
    }, []);

이렇게 setWord에도 함수를 사용할 수 있다.

await을 붙일 수 있는 경우

동기를 비동기로 만들기 위해 await을 붙인다.

하지만 사진처럼 리턴값이 Promise가 아니면 의미가 없다. 그렇기에 리턴값이 Promise일 때 await을 붙인다.

useEffect

useEffect에서는 그냥 async, await을 사용할 수 없다. 왜냐하면 리턴값이 void로 정해져 있기 때문이다. 그렇기에 리턴값이 무조건 Promise인 async 함수는 사용할 수 없다.

 

-안되는 코드 예시

    useEffect(async () => {
        await axios.post();
    }, []);

 

-되는 코드 예시

    useEffect(() => {
        const func = async () => {
        await axios.post();
        }
        func();
    }, []);

Brand

-예시

const usd = 10;
const eur = 10;
const krw = 2000;
function euroToUsd(euro: number): number {
  return euro * 1.18;
}

euroToUsd(krw);

만약 euro를 dallar로 바꿔주는 프로그램이 있다. 따라서 유로만 함수의 변수로 들어갈 수 있는데, krw가 와도 실행이 된다. 이때 krw가 못들어 가도록 막아주는 타입이 Brand이다.

 

-타입 지정 한 예시

// Brand는 가상 속성이다. 즉 실제로 존재하지 않는다.
type Brand<K, T> = K & { __brand: T };

type EUR = Brand<number, "EUR">;
type USD = Brand<number, "USD">;
type KRW = Brand<number, "KRW">;

//실제로 존재하지 않는 타입이라서 어쩔 수 없이 as를 사용해야 한다.
const usd = 10 as USD;
const eur = 10 as EUR;
const krw = 2000 as KRW;
function euroToUsd(euro: EUR): number {
  return euro * 1.18;
}

euroToUsd(krw);

이렇게 가상 타입인 Brand를 만들어서 붙여주면 함수에 EUR이 아닌 다른 값이 들어오면 에러가 난다. 이렇게 새로운 타입을 만들어서 조건을 맞춰줄 수 있다. 

event 

-form

    const onSubmitForm = useCallback(
        (e: FormEvent<HTMLFormElement>) => {},
        [])

form에서는 FormEvent 타입을 주면 된다. 제네릭 부분에는 대상을 주면된다.

 

-click

  const onClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {}, []);

클릭이면 이렇게 MouseEvent를 주면된다. 만약 에러가 발생하면 import를 정확히 정하면된다.

 

=> 다 외우려하지 말고 타이핑 되어있는 곳에 가면 주변에 다른 타입도 나와있다.

useRef

useRef는 제일 간단하지만 타이핑은 제일 까다롭다. useRef는 2가지가 있다.

 

-MutableRefObject

  const mutaRef = useRef(0);

  useEffect(() => {
    mutaRef.current += 1;
  }, []);

MutableRefObject는 태그에 연결하는게 아니라 값을 저장하고 있는 용도로 사용된다. useState와의 차이는 useState는 화면을 리렌더링 시키고 이 ref는 화면을 리렌더링 안시킨다.

 

-RefObject

1. 기본 사용법

  const inputEl = useRef<HTMLInputElement>(null);

RefObject는 jsx에 연결할 용도로 만들어 준 것이다. 따라서 이렇게 제네릭을 넣어줘야 한다. 그리고 null도 꼭 넣어줘야한다.

 

2. 응용 사용법

input 태그가 className="input"을 가지고 있을 때,

const inputEl = useRef<HTMLInputElement>(document.querySelector('.input'));

 

const inputEl = useRef<HTMLInputElement>(document.querySelector('.input'!));

뒤에 !이 있으면 null이 없다는 의미이다.