[super props] TypeScript

https://min9nim.github.io/2018/12/super-props/

 

 

export default class FilterForm extends React.PureComponent<FilterProps, FilterState>{
    constructor(props){
        super()
        console.log("props1",props)
        console.log("props",this.props)
    }

    static defaultProps = {
        
    }

    state : FilterState = {

    }

    componentDidUpdate(prevProps: FilterProps) {
        console.log("pre",prevProps);
    }

    onPressTouch = () =>{
        // console.log(this.state.stateMessage);
        console.log("props",this.props);
    }

...

밑에 onPressTouch 는 버튼을 눌렀을때 발생되는 function이다. console.log에 props 가 찍히게 된다.

하지만 생성자쪽 props는 this.props는 undefined가 뜨고 props는 찍히게 된다. 

이 원리는 역시 위에서 설명했듯이 사용자의 실수를 막기 위해서 리액트에서 this binding을 시켜준다. 만약 생성자에서 this 를 사용하고 싶다면 

constructor(props){
        super(props)
    }

사용해줘야 한다.

---

TypeScript

export default class FilterForm extends React.PureComponent<FilterProps, FilterState>{
    static defaultProps = {
        // message: "!!!"
    }

    state : FilterState = {

    }

    componentDidUpdate(prevProps: FilterProps) {
        console.log("pre",prevProps);
    }

    onPressTouch = () =>{
        // console.log(this.state.stateMessage);
        console.log("props",this.props);
    }

    render(){
        const {
            filterValue
        } = this.props
        return(
            <TouchableOpacity onPress={this.onPressTouch}>
                <Text>!!</Text>
            </TouchableOpacity>
        )
    }
}

props 와 state 관리는 직접 입력해서 하는식으로 한다. 그리고 위에서 언급했던것 처럼 this는 이미 binding 되어 있기 때문에 사용 가능하다. defaultProps는 typescript에서 지원해 준다.

https://stackoverflow.com/questions/37282159/default-property-value-in-react-component-using-typescript