[React] Component 프로퍼티, 상태 및 이벤트

프로퍼티(props)

컴포넌트가 외부에서 데이터를 받을 때에는 컴포넌트의 프로퍼티(props)를 이용한다. 프로퍼티는 읽기 전용으로 컴포넌트가 내부에서 프로퍼티를 변경하지 않는다.

class ValueInput extends React.Component {
    render() {
        return <input type="text" value={this.props.val} readOnly />;
    }
}

ReactDOM.render(<ValueInput val={"hello"} />, $('#root')[0]);

 

상태(state)

컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에는 상태(state)를 이용한다.

class ValueInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = { val: this.props.val };
    }

    handleChange(e) { this.setState({ val: e.target.value }); }

    render() {
        return (
            <input type="text" value={this.state.val}
                onChange={e => { this.handleChange(e) }} />
        );
    }
}

ReactDOM.render(<ValueInput val={"hello"} />, $('#root')[0]);

 

이벤트(event)

컴포넌트에서 외부로 데이터를 전달하기 위해서 HTML 요소의 이벤트를 사용하다.

class ValueInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = { val: this.props.val };
    }

    // static getDerivedStateFromProps(props, state) {
    //     return { val: props.val };
    // }

    handleChange(e) {
        let newVal = e.target.value;
        this.setState({ val: newVal });
        if (this.props.onChange) {
            this.props.onChange({ target: this, value: newVal });
        }
    }

    render() {
        return (
            <input type="text" value={this.state.val}
                onChange={e => { this.handleChange(e) }} />
        );
    }
}

function changeValue(e) {
    console.log(e.value);
}

ReactDOM.render(
    <ValueInput val={"hello"} onChange={e => {
        changeValue(e);
    }} />,
    $('#root')[0]
);

리액트의 이벤트는 재사용되는 합성 이벤트(SyntheticEvent)로서 HTML 이벤트를 감싸고 있는 구조이다. 기존 HTML 이벤트는 nativeEvent 속성에서 확인할 수 있다.

https://reactjs.org/docs/events.html

https://reactjs.org/docs/handling-events.html