위코드에서 제공하는 프론트엔드 학습 자료 일부를 정리한 내용입니다.

Hooks

리액트에서 사용하는 Hooks 인 useState 에는 아래와 같이 타입을 정의할 수 있지만 초기값을 boolean 값으로 넣어주면 타입 추론을 하므로 해당 타입을 적지 않아도 됩니다.

const [like, setLike] = useStatae<boolean>(false);

const [like, setLike] = useStatae(false); // 에러 없음

boolean 값만 할당할 state 라면 이렇게 타입을 지정하지 않아도 됩니다. 대신 state 초기값으로 null 도 사용해야 한다면 아래처럼 유니온 타입을 사용해야 합니다.

const [like, setLike] = useState<boolean | null>(null);

if (like) {
    // like 이 true 일 때만 실행할 로직
}

state 에 객체가 포함된 경우에는 아래와 같이 interface 를 사용할 수 있습니다.

interface Comment {
    comment: string;
    username: string;
    date: string;
    star: number;
}

const [comments, setComments] = useState<Comment[]>([
    comment: '맛있다';
    username: 'lucy';
    date: '2022.11.09';
    star: 5;
]);

useRef 또한 useState 처럼 타입을 명시하지 않아도 되지만, 코드의 명확성을 높이고 싶다면 레네릭을 넘겨주면 됩니다. 아래 예시는 ref 로 연결한 태그가 div 태그이므로 HTMLDivElement 타입을 적용했습니다. (이 외에 HTMLAnchorElement, HTMLButtonElement 등등 있음)

const reviewRef = useRef<HTMLDivElement>(null);

return (
    <>
        <div ref={reviewRef}>리뷰</div>
    </>
)

Event Handler

이벤트 핸들러 함수의 이벤트 매개변수에도 타입이 필요합니다. 명시하지 않아도 오류가 나진 않지만 어떤 종류의 이벤트이고 어느 태그에서 발생하는 것인지 써주는 것이 좋습니다.

const updateValue = (e : React.ChangeEvent<HTMLInputElement>) => {
    setEmail(e.target.value);
};

..

<input onChange={updateValue}/>

위 코드는 change 이벤트 이므로 ChangeEvent 타입을 사용했고, input 태그에서 발생하므로 HTMLInputElement 를 제네릭으로 넘겨주었습니다.