리액트를 다루는 기술 + typescript 4장 2

state와 input을 연관지어 공부하기 - Typescript

1. state에 input 값 담기

EventPractice.tsx

(...)
import { Component } from 'react';

interface StateIFace{
    message : string;
}
/* 이런 방식도 가능합니다!
type StateType = {
    message : string;
}
*/

class EventPractice extends Component {
    // 앞으로 인터페이스를 자주 사용하게 되므로, 지금부터 제대로 적용 시작합니다!
    state : StateIFace = {
        message : ''
    }

    render() : JSX.Element {
        return (
            <div>
                <h1>Event Practice!</h1>
                <input
                    type="text"
                    name="message"
                    placeholder="typing everything!"
                    value={this.state.message}
                    onChange={
                        (e) => {
                            this.setState({
                                message : e.target.value
                            })
                        }
                    }
                />
            </div>
        )
    }
}
export default EventPractice;

• Typescript 로 React를 적용하기 위해서는, typeorinterface에 익숙해 져야 합니다!

• 6장부터도 엄청나게 쓰이기 때문에 지금부터라도 익히면 편해지리라고 생각합니다!

• message : key 이며, '' : value(string) 이기 때문에,
  인터페이스에 message : string으로 쓰여집니다.

• onChange함수 내부에 this.setState 메서드를 넣어서 state 값을 변경 할 수 있게 만듭니다.

• Component에 state를 정의 해 놨으므로, Component의 고유 메서드 중
  setState를 사용하여 변경 할 수 있게 됩니다!

그러면 this.setState의 뜻을 세부적으로 봅시다!

• 그런데, this.setState() 내부에 객체 형식으로 값이 넣어져 있는 걸 볼 수 있습니다.
  this.setState({ message : e.target.value })

• 뜻을 해석하자면, 이 컴포넌트의 state 중에서, key 값이 message인 state를 찾습니다.
  그리고, 그 값을 e.target.value로 바꾼다는 뜻입니다!

---

버튼을 누를 때, comment 값을 공백으로 설정하기

• state의 값을 alert 메서드를 통해 직접 보는 예제입니다!

EventPractice.tsx

(...)
import { Component } from 'react';

// 이번엔 interface와 같은 type으로 적용해보기
type StateType = {
    message : string;
}

class EventPractice extends Component {
    // state에 type 적용
    state : StateType = {
        message : ''
    }
    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    (...)
                />
                <button onClick={
                    () => {
                        alert(this.state.message);
                        this.setState({
                            message : ''
                        });
                    }
                }>확인</button>
            </div>
        )
    }
}
export default EventPractice;

• <button>을 클릭 시, () => { 실행 할 메서드들 } 이 실행됩니다!

• alert(this.state.message)에 의해, 알림 창으로 현재 state안의 message 값을
  알수 있게 됩니다

• 직후, this.setState 메서드를 통해 message의 값을 ''로 바꾸어 공백으로 만듭니다.

---

결과물

---

임의 메서드 만들기 - Typescript Version

• 이제부터 Type을 지정하기 위해 어느 정도의 Typescript 문법이 들어가게 됩니다!
• 벨트 꽉 매세요~

EventPractice.tsx

(...)
import { Component } from 'react';

// state 타입 지정을 위해 만든 interface입니다
interface StateIFace{
    message : string;
}

// 1. 에서 설명
class EventPractice extends Component<{}, StateIFace> {
    state : StateIFace = {
        message : '',
    }

    // 2. 에서 설명
    constructor(props : {}){
        super(props);

        // JSX 문법 내부에서 this 로 handleChange를 참조하기 위해
        // .bind(this) 합니다. - 나중에 안씀(참고만 하세요)
        // 3. 에서 설명
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }

    // 그냥 리액트라면 원래 굉장히 쉽습니다
    // normal -> handleChange(e) {...}
    // input에 한 글자라도 입력시 계속 실행되는 메서드입니다
    handleChange(e : React.ChangeEvent<HTMLInputElement>) : void {
        this.setState({
            message : e.target.value
        });
    }

    // button 클릭 시 실행되는 메서드입니다!
    handleClick() : void {
        alert(this.state.message);
        // this.state.message 값 ''로 초기화
        this.setState({
            message : ''
        })
    }

    render() : JSX.Element {
        return(
            <div>
                <h1>Event Practice!</h1>
                <input
                    type="text"
                    name="message"
                    placeholder="just type everything!"
                    value={this.state.message}
                    onChange={this.handleChange}
                />
                <button onClick={this.handleClick}>확인</button>
            </div>
        )
    }
}
export default EventPractice;

1. • Component 에서 state를 사용하기 위해서는, props의 인터페이스도 정해주어야 합니다!
     형식은 Component<props타입, state타입>이 됩니다.
     
2. • EventPractice 컴포넌트를 호출하는 상위 컴포넌트는 props 자체를 안 주진 않습니다!
     props 선언을 안 하더라도, 빈 객체 형식으로 오므로, {}를 사용하여 super(props)로 전달합니다.
3. • 위의 .bind() 작업이 없다면, JSX문법에서 this.handleChange를
     선언하면 undefined가 뜨게 됩니다. (바인딩이 안 되서 못찾는 것!)

---

화살표 메서드를 사용한 메서드 작성 - Typescript Ver

• 메서드 바인딩을 생성자에서 하지 않고 화살표 함수로 간단하게 작성하는 방법

• 이 방식을 앞으로 계속 쓴다고 생각하시면 됩니다!

EventPractice.tsx

(...)
import { Component } from 'react';

interface StateIFace{
    message : string;
}

// class EventPractice extends Component<{}, StateIFace> {...}
// 1. 에서 설명
class EventPractice extends Component {
    state : StateIFace = {
        message : '',
    }

    handleChange = (e : React.ChangeEvent<HTMLInputElement>) : void => {
        this.setState({
            message : e.target.value
        });
    }

    handleClick = () : void => {
        alert(this.state.message);
        this.setState({
            message : ''
        });
    }

    render() {
        return (
            <div>
                <h1>Event Practice</h1>
                <input
                    type="text"
                    name="message"
                    placeholder="type everything"
                    value={this.state.message}
                    onChange={this.handleChange}
                />
                <button onClick={this.handleClick}>확인</button>
            </div>
        )
    }
}
export default EventPractice;

1. • constructor(생성자) 를 호출하지 않으므로,
     Component에 인터페이스를 적용 할 필요가 없습니다.

바인딩 작업을 하지 않아 훨씬 편하고 깔끔합니다!