• 카테고리

    질문 & 답변
  • 세부 분야

    프로그래밍 언어

  • 해결 여부

    미해결

react 함수 컴포넌트 타이핑은 있는데 클래스 컴포넌트 타이핑 예제 코드가 없네요.

23.11.25 20:37 작성 조회수 133

1

react 함수형 컴포넌트 타이핑

예제 코드는 제로초님 github에 가면 있어서 쉽게 복붙 후 강의를 따라가기 좋은데, class 컴포넌트 타이핑은 예제 코드가 없는것 같습니다!

제로초님 ts-all-in-one github레포에 있으면 좋을것 같아요!

답변 1

답변을 작성해보세요.

0

rhkdtjd_12님의 프로필

rhkdtjd_12

질문자

2023.11.25

필요한 분들을 위해 예제 코드를 올려 두겠습니다.

 

import React, { Component } from "react";

class WordRelay extends Component {
  state = {
    word: "제로초",
    value: "",
    result: "",
  };

  onSubmitForm = (e: React.FormEvent) => {
    e.preventDefault();
    const input = this.input;
    if (this.state.word[this.state.word.length - 1] === this.state.value[0]) {
      this.setState({
        result: "딩동댕",
        word: this.state.value,
        value: "",
      });
      if (input) {
        input.focus();
      }
    } else {
      this.setState({
        result: "땡",
        value: "",
      });
      if (input) {
        input.focus();
      }
    }
  };

  onChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({ value: e.currentTarget.value });
  };

  input: HTMLInputElement | null = null; // this.input을 생성
  onRefInput = (c: HTMLInputElement) => {
    this.input = c;
  };

  render() {
    return (
      <>
        <div>{this.state.word}</div>
        <form onSubmit={this.onSubmitForm}>
          <input
            ref={this.onRefInput}
            value={this.state.value}
            onChange={this.onChangeInput}
          />
          <button>클릭!!!</button>
        </form>
        <div>{this.state.result}</div>
      </>
    );
  }
}

export default WordRelay;

감사합니다!