[TS] Section14 React.js & Typescript

useState

초기값이 없는 경우 다음과 같이 타입을 지정할 수 있다.
아래의 경우는 null 혹은 AuthUser 타입을 가진다는 것을 의미

interface AuthUser {
  name: string;
  email: string;
}

const [user, setUser] = useState<AuthUser | null>(null);

하지만, 위와 같이 설정하게 되면 null 타입 또한 허용되기 때문에, as를 이용하는 것이 좋다.

아래와 같이 as를 통해 타입을 지정하면 초기 세팅 이후 user는 항상 AuthUser 타입을 가진다는 것을 의미

interface AuthUser {
  name: string;
  email: string;
}

const [user, setUser] = useState<AuthUser>({} as AuthUser);

---

useReducer

import React, { useReducer } from 'react';

interface CounterState {
  count: number;
}

interface CounterAction {
  type: string;
  payload: number;
}

const initalState = { count: 0 };

function reducer(state: CounterState, action: CounterAction) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + action.payload };
    case 'decrement':
      return { count: state.count - action.payload };
    default:
      return state;
  }
}

function counter(props) {
  const [state, dispatch] = useReducer(reducer, initalState);

  return (
    <>
      count: {state.count}
      <button onClick={() => dispatch({ type: 'increment', payload: 10 })}>
        increment 10
      </button>
      <button onClick={() => dispatch({ type: 'dncrement', payload: 10 })}>
        dncrement 10
      </button>
    </>
  );
}

export default counter;

---

useRef

import React, { useEffect, useRef } from 'react';

function DomRef(props) {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return (
    <div>
      <input type="text" ref={inputRef} />
    </div>
  );
}

export default DomRef;

만약 inputRef가 절대 null이 되지 않는다고 한다면 다음과 같은 방법을 사용할 수 있다.

  const inputRef = useRef<HTMLInputElement>(null!);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
    inputRef.current!.focus();
  }, []);

---

useRef & setInterval

  const [timer, setTimer] = useState(0);
  const interValRef = useRef<number | undefined>(undefined);

  const stopTimer = () => {
    if (interValRef.current) window.clearInterval(interValRef.current);
  };

  useEffect(() => {
    interValRef.current = window.setInterval(() => {
      setTimer((timer) => timer + 1);
    }, 1000);

    return () => {
      stopTimer();
    };
  });

혹은

...
const interValRef = useRef<number | undefined>(undefined);

...
  
const stopTimer = () => {
window.clearInterval(interValRef.current);
  };
...