[React] react에서 typescript

typescript를 react에서 사용하는 방법

CRA 실행시
npx create-react-app ts-react-tutorial --template typescript

1. constructor, super문을 없애고 선언한 state 방식

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

class component extends React.Component<State> {
  state:State = {
      name: '',
      age: 0
    }
  
  render()(
    <div>hello Typescript<div>
  )
}

2. props를 state로 가져와서 사용하기

import * as React from 'react';

interface CounterProps {
  startNumber: number;
}

interface CounterState {
  number: number;
}

class Counter extends React.Component<CounterProps, CounterState> {
  public state = {
    number: 0,
  };

  constructor(props: CounterProps) {
    super(props);
    this.state.number = props.startNumber;
  }

  public handleClick = () => {
    this.setState({
      number: this.state.number + 1,
    });
  };

  public render() {
    return (
      <div>
        <h1>{this.state.number}</h1>
        <button onClick={this.handleClick}>Click Me</button>
      </div>
    );
  }
}

export default Counter;

3.FC를 사용하면 children을 그대로 가져가지만 defaultProps 사라지는게 있어서 사용을 안하는게 좋음

만약 사용하지 않는다면

import React from 'react';

type GreetingsProps = {
  name: string;
  mark: string;
};

const Greetings = ({ name, mark }: GreetingsProps) => (
  <div>
    Hello, {name} {mark}
  </div>
);

Greetings.defaultProps = {
  mark: '!'
};

export default Greetings;

4. 인풋 이벤트 가져올 경우, 다양한 이벤트 핸들러와 요소타입목록이 있음

ex) React.ChangeEvent<HTMLInputElement>

const onChange: React.<HTMLInputElement> = (
    e
  ) => {
    const { name, value } = e.target;
    setForm({
      ...form,
      [name]: value,
    });
  };

리덕스와 타입스크립트

https://react.vlpt.us/using-typescript/03-ts-manage-state.html
(...내용추가예정...)