[한 입 크기로 잘라먹는 타입스크립트] 리액트와 타입스크립트

1. 타입스크립트 리액트 시작하기(JS 프로젝트에서 마이그레이션)

1) 타입선언

npm i @types/node @types/react @types/react-dom @types/jest

2) tsconfig.json

{
	"compilerOptions" : {
    	"target" : "ES5",
        "module" : "CommonJS",
        "strict" : true,
        "allowJs" : true,
        "esModuleInterop" : true,
        "jsx" : "react-jsx"
	},
    "include" : ["src"]
}

3) 모든 js 파일을 jsx로

4) 각 파일의 에러 해결

 

2. 상태관리와 Props

// onChange 이벤트 타입
React.ChangeEvent<HTMLInputElement>

interface를 코드 여기저기에서 사용할 때 src 디렉토리 내에 types.ts 파일을 만들고 interface를 export 하는 방식을 사용하여 관리한다.

interface Props extends Todo {}

useState 대신 useReducer를 사용하는 방법도 있다.

type Action = 
	{
    	type: "CREATE",
        data: {
        	id : number;
            content: string,
       	},
    } | { type: "DELETE", id: number};
    
funtion reducer(state: Todo[], action: Action) {
	switch(action.type){
    	case "CREATE":{
        	return [...state,action.data];
        }
        case "DELETE":{
        	return state.filter((id) => it.id !== action.id);
        }
}

...

const [todos, dispatch] = useReducer(reducer,[]);

const onClickAdd = (text: string) => {
	dispatch({
    	type: "CREATE",
        data: {
        	id : idRef.current++;
            content: text,
       	},
    });
}

const onClickDelete = (id: number) => {
	dispatch({
    	type: "DELETE",
        id: id,
    });
}

 

3. Context API

// context 객체
export const TodoStateContext = React.createContext<Todo[] | null>(null);

// dispatch 
export const TodoDispatchContext = React.createContext<{
	onClickAdd: (text: string) => void;
    onClickDelete: (id: number) => void;
} | null>(null);

// custom hook(타입 좁히기)
export function useTodoDispatch(){
	const dispatch = useContext(TodoDispatchContext);
    // dispatch가 객체타입 이거나 null 타입이라고 해두었으므로 타입 좁혀주기
    if(!dispatch) = throw new Error("~~");
    return dispatch;
}

// App.tsx return 문
return (
...
<TodoStateContext.Provider value={todos}
	<TodoDispatchContext.Provider value={{
    	onClickAdd,
        onClickDelete
        }}>
...

// 사용(자식 컴포넌트 등)
const dispatch = useTodoDispatch();

const onClickButton = () => {
    dispatch.onClickAdd(text);
    setText("");
}

 

4. 외부 라이브러리 사용하기

TS 마크가 붙어있는 라이브러리는 명령어만으로 사용가능하지만 그렇지 않은 경우(lodash 등)는 타입 정보가 제공되지 않는다. 그럴 때는 DT 마크를 확인하고 그것을 눌러 타입 정보를 제공하는 라이브러리를 설치할 수 있다. 

 

5. 타입스크립트 템플릿 소개

https://create-react-app.dev/docs/adding-typescript/

Adding TypeScript | Create React App

자동으로 CRA가 typescript 템플릿으로 실행된다.

 

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8/dashboard

한 입 크기로 잘라먹는 타입스크립트 - 인프런 | 강의