Archive

React에서 Typescript 사용하기 - 2

31 Aug 2021 | Typescript

React에서 Typescript 사용하기 - 2

1. event

onClick, onChange 등 타입스크립트의 타입 추론은 inline 방식일 때에만 적용이 된다

만약 jsx 밖에서 함수를 정의하고 매개변수 event 객체를 받는다고 한다면 에러를 발생시킨다

const EventComponent: React.FC = () => {
  /*
  const onChange = (e) => { // e 부분에서 에러가 발생
      console.log(e);
  };
  */
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    //...  
  };
    
  return (
  	<div>
    	<input onChange={onChange} />  
    </div>
  );
};

저 긴걸 어떻게 아느냐고? input의 onChange 부분에 마우스를 올려보면 다 나온다. 그대로 복붙

2. Class based component

import { Component } from 'react';

interface User {
  name: string;
  age: number;
}

interface UserSearchProps {
  users: User[]
}

interface UserSearchState {
  name: string;
  user: User | undefined;
}

class UserSearch extends Component<UserSearchProps> {
  state: UserSearchState = {
    name: '',
    user: undefined
  };

  handleClick = () => {
    const foundUser = this.props.users.find((user) => {
      return user.name === this.state.name;
    });

    this.setState({ user: foundUser });
  }

  reunder() {
    const { name, user } = this.state;
    return (
      <div>
        User Search
        <input value={name} onChange={(e) => this.setState({ name: e.target.value })}/>
        <button onClick={this.handleClick}>Find User</button>
        <div>
          {user?.name}
          {user?.age}
        </div>
      </div>
    );
  }
};

export default UserSearch;

3. ref

useRef로 엘리먼트 참조 시 초기값 null을 주지 않으면 에러가 발생한다. 따라서, 타입도 null 추가

import { useEffect, useRef } from 'react';

const SearchBar: React.FC = () => {
    const inputRef = useRef<HTMLInputElement | null>(null);
    
    useEffect(() => {
        inputRef.current?.focus();
    }, []);
    
    return <input ref={inputRef} />
}

참고 자료

udemy - React and Typescript: Build a Portfolio Project

Related Posts