React | Component의 State

State

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

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

위의 코드를 설명하자면,
render() { 이 부분이 실행할 함수가 들어가는 부분이다. }
div를 클릭하면 clicked라는 상태를 수정한다. 여기서 setState() 함수는 state를 업데이트한다.

 

{clicked: !this.state.clicked}라는 말은 현재 clicked의 반대로 (toggle처럼) 저장한다는 의미이다.
{this.state.clicked ? '좋아요' : '싫어요'}
clicked state가 true면 좋아요, false이면 싫어요를 보여준다.

 

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

 

Button 컴포넌트를 그리려면 this.state.clicked값이 필요한데, 처음에는 constructor()에서 초기값을 지정해준다. super()라는 키워드를 써야 React.Component class에 있는 메소드를 사용할 수 있다.

 

props까지 넣으면 위 코드가 된다.
Button에 type을 추가했고, Button 컴포넌트에서 props로 받을 수 있다.