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

state - Typescript

• 컴포넌트 내부에서 바꿀 수 있는 값

• props는 상위 컴포넌트에 의지, state는 내부에서 직접 변경이 가능합니다.

• 솔직히 클래스형 컴포넌트는 굉장히 까다롭습니다.

• 나중엔 대부분 함수형 컴포넌트만 쓰게 됩니다.

• 그래도 코드 참고 할 때, 읽을 줄 알아야 해서 이해는 필수입니다!!

  
  

클래스형 컴포넌트의 state

---

• src/ 디렉토리에 여전히 작성하시면 됩니다.

Counter.tsx

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

interface StateFace{
    number : number;
}

class Counter extends Component<{}, StateFace> {
    constructor(props : {}){
        super(props);

        // Component 에서 제공하는 초기 state 값 지정!
        // StateFace 지정해서 숫자 제외한 값을 넣으면 에러가 납니다.
        this.state = {
            number : 0
        };
    };
    render() : JSX.Element {
        const {number} = this.state;
        return (
            <div>
                <h1>{ number }</h1>
                <button
                    //클릭시 실행 할 함수
                    onClick={() => {
                        this.setState({number : number + 1})
                    }}
                >+1</button>
            </div>
        )
    }
}
export default Counter;

• props 부분에 {}를 넣어 아무 값도 오지 않다는 것을 알려줍니다.

• 클래스형 컴포넌트에서 state 설정 시, constructor을 사용하여 설정.

• 하지만, constructor 사용 시 반드시 내부에서 super(props); 호출 해야 합니다.

• state 조회 시, this.state.xxx로 조회가 가능합니다!

• state 값을 변경하고 싶으면 this.setState를 사용하면 됩니다.

• this.setState({ [ 변경 할 state값 ] : [ 넣어 줄 값 ] })

결과

App.tsx

(...)
import Counter from './Counter';

const App = () : JSX.Element => {
    return <Counter />;
}

state를 constructor에서 꺼내기

---

Counter.tsx

(...)

import {Component} from 'react';

// 한 코드 파일에서 값이 명확하게 명시 되어 있다면 interface 생략도 가능하다

class Counter extends Component {
    state = {
        num : 0,
        fixedNumber : 0,
    };
    render() {
        const { num, fixedNumber } = this.state;
        return (...);
    }
}
export default Counter;

this.setState에 객체 대신 함수 인자 전달하기 - Typescript

---

• this.setState({number : number + 1})는 객체를 전달하여 변경하는 것입니다.

• 하지만, onClick 인자에 두 번 선언 시 number가 2번 오르지 않습니다.

• 따라서, this.setState 인자에 함수를 주는 방식이 있습니다.

Example

(...)
import Component from 'react'

//prop으로 넘어온 값도 있다고 가정합니다.
interface PropFace{
    num : number;
    fixedNumber : number;
}

interface StateFace{
    num : number;
    fixedNumber : number;
}

class Counter extends Component<PropFace, StateFace> {
    state = {
        num : 0,
        fixedNumber : 0,
    };
    render() {
        const { num, fixedNumber } = this.state;
        return (
            <div>
                <h1>{num}</h1>
                <h2>Never Changed This Number : { fixedNumber }</h2>
                <button
                    onClick={() => {
                        this.setState((prevState : StateFace) => {
                            return {
                                num : prevState.num + 1
                            };
                        });
                        // 위와 완전히 동일한 함수
                        // this.setState 선언 시 prevState를 StateFace로 자동 인식합니다.
                        this.setState( prevState => ({
                            num : prevState.num + 1
                        }));
                    }}
                >+1</button>
            </div>
        )
    }
}