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

안녕하세요, Einere입니다.

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

 

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

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

---

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

 

 

 

useRef

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.
본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다.

useRef는 변경가능한(mutable) 값을 담고있는 컨테이너라고 생각하시면 됩니다. 이러한 값은 원시값을 포함하여 객체, 더 나아가서 컴포넌트까지 가능합니다.

 

import * as React from 'react';
import {useContext, useCallback, useRef, useLayoutEffect} from 'react';
import {FunctionComponent} from 'react';
import {TodoInfoContext, TodoInfoContextType} from "../TodoInfoContext/TodoInfoContext";

export const TodoInput: FunctionComponent = function () {
    const todoInfoContext: TodoInfoContextType = useContext(TodoInfoContext);

    // useRef의 제네릭에 담고자 하는 값의 타입을 넣어줍니다.
    // 인자(초기값)로는 보통 null을 추천합니다.
    const todoInputRef = useRef<HTMLInputElement>(null);

    const addTodoItem = useCallback((e) => {
        e.preventDefault();
        // 컴포넌트 내에서 useRef의 반환값을 사용할 땐 null check가 필수입니다.
        if(todoInputRef && todoInputRef.current) {
            console.log(todoInputRef.current.value);
        }
    }, [todoInputRef]);
    
    return (
        <>
            <label htmlFor={"TodoTitle"}>Todo Title</label>
            <input type={"string"} name={"TodoTitle"} ref={todoInputRef}/>
            <button type={"button"} onClick={addTodoItem}>Add</button>
        </>
    );
};

useRef()의 제네릭에 담고자 하는 값의 타입을 넣어주며, 인자로는 null을 넣어줍니다. 초기값으로 null을 넣어주는 이유는, 명시적으로 빈 레퍼런스를 생성했음을 알려주기 위함입니다.

실제로 todoInputRef에 input엘리먼트가 담기는 시점은 componentDidMount(), 즉 useEffect() 혹은 useLayoutEffect()의 콜백이 실행되기 전입니다. 따라서, 코딩을 할 때는 명시적으로 null check가 필요합니다. (그렇지 않으면 "Object is possibly 'null'."이라는 에러가 발생합니다.)

 

useImperativeHandle

 

 

useLayoutEffect

 

useDebugValue

 

 

참고

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

Hooks API Reference – React

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

TypeScript and React: Hooks