React 2. Using Typescript

Example Hook

useState

// Infer the type as "boolean"
const [enabled, setEnabled] = useState(false);

// Explicitly set the type to "boolean"
const [enabled, setEnabled] = useState<boolean>(false);

• 명시적으로 state에 대한 type 제공

type RequestState =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success', data: any }
  | { status: 'error', error: Error };

const [requestState, setRequestState] = useState<RequestState>({ status: 'idle' });

• 다음과 같은 union type도 가능

useReducer

• reducer 함수와 초기 state를 사용하는 더 복잡한 hook

import {useReducer} from 'react';

interface State {
   count: number 
};

type CounterAction =
  | { type: "reset" }
  | { type: "setCount"; value: State["count"] }

const initialState: State = { count: 0 };

function stateReducer(state: State, action: CounterAction): State {
  switch (action.type) {
    case "reset":
      return initialState;
    case "setCount":
      return { ...state, count: action.value };
    default:
      throw new Error("Unknown action");
  }
}

export default function App() {
  const [state, dispatch] = useReducer(stateReducer, initialState);

  const addFive = () => dispatch({ type: "setCount", value: state.count + 5 });
  const reset = () => dispatch({ type: "reset" });

  return (
    <div>
      <h1>Welcome to my counter</h1>

      <p>Count: {state.count}</p>
      <button onClick={addFive}>Add 5</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

• interface State : reduce의 state를 설명
• type CounterAction : reducer에 전달할 수 있는 다른 작업을 설명
• const initialState : 초기 state에 대한 type과 useReducer에서 기본적으로 사용되는 type 제공
• stateReducer(state: State, action: CounterAction) : state reduce 함수의 매개변수 및 return 값에 대한 type 설정

useContext

• component를 통해 props를 전달할 필요 없이 구성 요소 트리 아래로 데이터를 전달하는 기술

import { createContext, useContext, useState } from 'react';

type Theme = "light" | "dark" | "system";
const ThemeContext = createContext<Theme>("system");

const useGetTheme = () => useContext(ThemeContext);

export default function MyApp() {
  const [theme, setTheme] = useState<Theme>('light');

  return (
    <ThemeContext.Provider value={theme}>
      <MyComponent />
    </ThemeContext.Provider>
  )
}

function MyComponent() {
  const theme = useGetTheme();

  return (
    <div>
      <p>Current theme: {theme}</p>
    </div>
  )
}

• 적절한 default 값이 있을 때 작동한다.
• 그렇지 않은 경우 명시적으로 ContextShape | null 를 명시적으로 설정해야 함

useMemo

const visibleTodos = useMemo(() => filterTodos(todos, tab),[todos, tab]);

• 함후 호출에서 기억될 값을 생성/재접근 하여 두 번째 매개변수로 전달된 종속성이 변경되는 경우에만 함수를 다시 실행함.
• 호출 결과는 첫 번째 매개변수에 있는 함수의 반환갑에서 추론됨

useCallback

import { useState, useCallback } from 'react';

export default function Form() {
  const [value, setValue] = useState("Change me");

  const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>((event) => {
    setValue(event.currentTarget.value);
  }, [setValue])
  
  return (
    <>
      <input value={value} onChange={handleChange} />
      <p>Value: {value}</p>
    </>
  );
}

• 두 번째 매개변수에 전달된 정속성이 동일한 함수에 대한 안정적인 참조 제공
• strict mode에서 작업하는 겨웅, useCallback 콜백에 매개변수 type 추가해야 함

Useful Types

DOM events

import { useState } from 'react';

export default function Form() {
  const [value, setValue] = useState("Change me");

  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    setValue(event.currentTarget.value);
  }

  return (
    <>
      <input value={value} onChange={handleChange} />
      <p>Value: {value}</p>
    </>
  );
}

• React에서 DOM events를 작업할 때 이벤트 핸들러에서 이벤트 타입을 추론할 수 있는 경우 많음
• 하지만 이벤트 핸들러에 전달할 함수를 추출하려면 이벤트 타입을 명시적으로 설정해야 함

Children

c omponent의 하위 항목을 설명하는 데는 두가지 일반적인 경로가 있음
1. React.ReactNode : JSX에서 자식으로 전달될 수 있는 모든 가능한 유형의 통함
2. React.ReactElement : 문자열이나 숫자와 같은 Javascript 기본 요소가 아닌 JSX 요소

Style Props

interface MyComponentProps {
  style: React.CSSProperties;
}

• React에서 inline styles를 사용할 때, React.CSSProperties를 사용하여 style prop에 전달될 객체를 설명할 수 있음
• 이 유형은 가능한 모든 CSS 속성의 통합이며 유효한 CSS 속성을 style prop에 전달