[ReactJS] state

State

: react.js 컴포넌트의 또 다른 핵심적인 개념, state

state

- 컴포넌트에서 유동적인 데이터를 보여줄 때 사용된다.

- 초기값 설정이 필수인데, 초기값 설정을 할 때는 생성자(constructor)에서 this.state = { } 으로 설정한다.

- 값을 수정할 때는 this.setState({...}) 을 사용하여 컴포넌트 내부에서 값을 변경할 수 있다.

- 렌더링 되기 전에는 setState 메소드를 사용하지 못한다.

- 렌더링 된 다음에는 this.state = 절대 사용하지 말 것.

예제

(줄 1~7) Conter라는 이름의 새로운 컴포넌트를 작성, 간단하게 text를 렌더링하는 컴포넌트를 만들었다.

(줄 12) App 컴포넌트에서  Counter 컴포넌트를 렌더링한다.

this.state.value와 버튼 생성

(줄 2~6) state를 사용할 때는 초기값 설정이 필수다. constructor를 만들고 그 안에서 value를 0으로 초기값 설정해주었다.

constructor 메소드의 매개변수(파라미터)는 props이며 이 props는 나중에 Counter가 만들어질 때 전달받을 props이다.

그리고 super를 통하여 상속받은 클래스인 React.Component 즉, parent의 생성자 메소드를 먼저 실행하고 우리가 할 작업들을 하는 것이다.

이렇게 super(props)을 먼저 실행해줘야 this.state나 props에 접근할 수 있다.

임의 메소드 작성

(줄 10~14) 버튼을 클릭할 때 실행할 메소드를 작성하였지만 실행이 안된다. 자바스크립트 컴포넌트에서 임의 메소드를 실행할 때는 해당 메소드의 this가 뭔지 모르기 때문이다. 따라서 this가 뭔지 알려주려면 따로 binding을 해줘야 한다.

this가 뭔지 알려주려면 따로 binding을 해줘야 한다

(줄 20) 이 handleClick에서 사용될 this는 render 메소드에서 사용되는 this와 같다고 binding 시켜줬다.

constructor에서 binding 시켜주는 것이 좋다

(줄 7) constructor에서 binding 해주는 것이 더 좋다.

(줄 21) handleClick 메소드를 불러올 때 뒤에 괄호가 없는 점에 유의하자

렌더링 된 이후에는 this.state.value에 직접 넣지 말자

(줄 15~16) 렌더링 된 다음에는 this.state = 절대 사용하지 말 것. setState를 사용하자.