[TS] TS with React - hook 사용하기 1

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

 

2020/02/23 - [programing/JavaScript] - [TS] TS with React - hook 사용하기 2

2020/02/23 - [programing/JavaScript] - [TS] TS with React - hook 사용하기 3

 

---

이번 포스트에서는 TypeScript로 React의 hook을 사용하는 방법에 대해 알아보도록 하겠습니다.

 

 

useState

 

useEffect

 

createContext, useContext

// todoInfoContext.ts
import {createContext} from 'react';

// todoInfo의 타입을 정의합니다.
export interface TodoInfoType {
    id: number;
    title: string;
    content: string;
    createTime: Date;
    dueTime: Date;
}

// todoInfoContext컨텍스트의 타입을 정의합니다.
export interface TodoInfoContextType {
    todoInfoList: TodoInfoType[];
}

// createContext의 제네릭에 컨텍스트의 타입을 넣어주시면 됩니다.
// createContext의 인자로는 초기값을 넣어줍니다.
export const todoInfoContext = createContext<TodoInfoContextType>({todoInfoList: []});

할일 정보를 관리하기 위해 todoInfoContext라는 컨텍스트를 만들었습니다. 해당 컨텍스트의 타입은 TodoInfoContextType이며, createContext()의 제네릭에 넣어주시면 됩니다. 

TodoInfoContextType에는 할일 정보의 배열인 todoInfoList를 가지고 있으며, 해당 속성의 타입은 TodoInfoType[]입니다.

 

import * as React from 'react';
import {useContext, useCallback, useRef, useLayoutEffect} from 'react';
import {FunctionComponent} from 'react';
// TodoInfoContext와 타입들을 가져옵니다.
import {todoInfoContext, TodoInfoContextType} from "../TodoInfoContext/todoInfoContext";

export const TodoInput: FunctionComponent = function () {
    // useContext의 인자로 import한 todoInfoContext를 넣어줍니다.
    // 반환값인 TodoInfoContext는 JSX에 컴포넌트로 사용합니다.
    const TodoInfoContext: TodoInfoContextType = useContext(todoInfoContext);

    const todoInputRef = useRef<HTMLInputElement>(null);

    const addTodoItem = useCallback((e) => {
        e.preventDefault();
        if(todoInputRef && todoInputRef.current) {
            console.log(todoInputRef.current.value);
        }
    }, [todoInputRef]);

    return (
        {/* TodoInfoContext 컴포넌트의 Provider의 value에 공유할 값을 넣어줍니다. */}
        <TodoInfoContext.Provider value={{
            todoInfoList: []
        }}>
            <label htmlFor={"TodoTitle"}>Todo Title</label>
            <input type={"string"} name={"TodoTitle"} ref={todoInputRef}/>
            <button type={"button"} onClick={addTodoItem}>Add</button>
        </>
    );
};

이제 만든 컨텍스트를 사용합니다. 사용은 만드는 것에 비해서 간단합니다. useContext()의 인자로 위에서 생성한 컨텍스트를 넣어주면 됩니다.

 

 

참고

https://ko.reactjs.org/docs/hooks-reference.html

Hooks API Reference – React

https://fettblog.eu/typescript-react/hooks/

TypeScript and React: Hooks