Component의 State

State

state란 말 그대로 컴포넌트의 상태 값이다.

state와 props는 둘 다 object 이고, 화면에 보여줄 정보를 가지고 있다는 점에서 서로 비슷한 역할을 한다. props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고, state는 컴포넌트 내에서 정의하고 사용한다.

class Button extends React.Component {
    constructor() {
        super();

        this.state = {
            clicked: flase,
        };
    }

    render() {
        return (
            <div
                className="btn"
                onClick={() => {
                    this.setState({ clicked: !this.state.clicked });
                }}
            >
                {this.state.clicked ? '좋아요' : '싫어요'}
            </div>
        );
    }
}

ReactDom.render(<Button />, document.getElementByID('root'));

onClick={()=>{this.setState({ clicked: !this.state.clicked })}}

• click하면 clicked라는 state를 수정한다. this.setState() 함수로 state를 업데이트 할 수 있다.
• !this.state.clicked 로 업데이트 한다는 말은 현재 clicked의 반대로 저장한다는 말이다.

{this.state.clicked ? ‘좋아요’ : ‘싫어요’}

• clicked staterk true면 ‘좋아요’를 보여주고 false면 ‘싫어요’를 보여준다.

constructor()

constructor는 class의 인스턴스가 생성될 때 항상 호출되는 함수이다. 초기화할 값들을 constructor에서 세팅해준다고 보면 된다.

constructor() {
		super();

		this.state = {
			clicked: flase
	}

Button 컴포넌트를 그리려면 this.state.clicked 값이 필요한데, 제일 최초에는 값이 없으므로 constructor에서 값을 지정해준다.

super() 라는 키워드를 꼭 작성해야 React.Component class에 있는 메서드를 사용할 수 있다.