(React) 상태, state

React 상태에 대해

React에서 상태란?

컴포넌트의 변경 가능한 데이터 저장소.

상태를 이용하면 UI의 표현을 갱신할 수 있다.

상태에 접근하기

상태 객체는 this 를 통해 접근 가능하다.

this.state 의 형태로 접근한다.

초기 상태 설정하기

상태 데이터를 렌더링하기 위해서는 상태를 초기화해야 한다.

초기 상태를 설정하려면 리액트 클래스의 생성자에 this.state 를 선언하고 super()에 속성을 전달해야 한다.

class Content extends React.Component {
	// 생성자
    constructor(props) {
    	// super()에 속성 전달
        super(props)
        // this.state 선언
        this.state = {
            name: 'Hyunjae',
            major: 'cs'
        }
    }
}

위와 같이 초기화한다.

상태 갱신하기

this.setState(data, callback) 메서드를 사용하여 상태를 변경할 수 있다.

이 메서드를 실행하면 data를 현재 상태에 합치고, 그 상태를 렌더링한다. 이후에 callback 함수를 실행한다.

class Content extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'Hyunjae',
            major: 'cs'
        }
    }
    updateValues(){
        this.setState({major: 'Biology'})
        // 현재 상태의 major를 Biology로 갱신
    }
}

위 같이 상태를 갱신할 수 있다.