210211 TIL #React#Typescript

이예주·2021년 2월 11일

React TIL typescript

Today I Learned

목록 보기

9/10

React

웹 게임을 만들며 배우는 React(9)

Context API

부모 컴포넌트 아래의 모든 자식 컴포넌트가 데이터를 사용하기 위해서는 매번 데이터를 넘겨주어야 하는데, Context API를 사용하면 한 번에 데이터를 넘길 수 있다.

/* MineSearch.jsx */
export const TableContext = createContext({
  // 초기값을 넘겨준다.
  tableData: [],
  dispatch: () => {},
});

const MineSearch = () => {
  …
  const value = useMemo(() => ({ tableData: state.tableData, dispatch }), [state.tableData]);
  
  return (
    <TableContext.Provider value={value}>
      …
      <Form />
      <Table />
    </TableContext.Provider>
  );
};

부모 컴포넌트에서 createContext 함수를 사용하여 초기 데이터 값을 생성한다. 그런 뒤, 데이터를 넘겨줄 자식 컴포넌트들을 <TableContext.Provider> 태그로 감싸준다. 전달할 데이터 값은 태그 안에 value 요소로 넣어주면 된다. 이때, 요소 안에 직접 데이터를 넣으면 매번 새로운 데이터가 들어가는 것으로 인식되기 때문에 불필요한 리렌더링이 발생한다. 따라서 useMemo를 이용한 별도의 변수를 생성하여 비동기로 데이터를 전달한다.

/* Form.jsx */
import { TableContext } from './MineSearch';

const Form = () => {
  const onClickBtn = useCallback(() => {
    // 부모 컴포넌트 사용 가능
  	dispatch({ type: START_GAME, row, cell, mine });
  }, [row, cell, mine]);
};

Typescript

타입스크립트 입문 - 기초부터 실전까지(6)

Promise를 이용한 API 함수 타입 정의

함수의 타입을 정의할 때는 해당 함수의 리턴 값을 참조하여 넣으면 된다. Promise 또한 마찬가지로 반환 값에 Promise를 사용한다면 함수 타입에 이를 넣어주면 되는데, 구체적인 타입이 필요하다.

function fetchItems(): Promise<string[]> {
  let items = ['a', 'b', 'c'];
  return new Promise(function (resolve) {
    resolve(items);
  });
}

fetchItems 함수의 반환 타입은 Promise이지만 더 구체적으로는 items라는 문자열 배열을 넘기고 있기 때문에 Promise의 타입까지 정의하는 것이 좋다.

타입 추론(Type Inference)

변수를 선언하거나 초기화할 때, 또는 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입을 따로 지정하지 않더라도 타입 추론이 발생한다.

Best Common Type
가장 근접한 타입을 추론하는 것을 Best Common Type이라고 한다.

타입 단언(Type Assertion)

타입을 추론할 때 어떤 경우에는 타입스크립트보다 코드를 작성하는 개발자가 더 정확하게 타입을 추론할 수 있다. 이런 경우에 as를 사용하여 타입 단언이 가능하다.

var a;
a = 20;
a = 'a';
var b = a;

a는 처음에 숫자를 할당 받은 뒤, 문자를 할당 받는다. 그리고 나서 b에 a를 할당하기 때문에 코드를 작성하는 입장에서는 b의 타입이 문자임을 알 수 있다. 그러나 타입스크립트에서는 a가 숫자와 문자를 모두 받을 수 있는 변수라고 추론하여 b를 any 타입으로 정의한다.