State

state를 다뤄보자.

 

사용법은 앞에서 배운 props와 비슷하다.

 

state는 props과 다르게 컴포넌트 자신이 지닌 값으로 컴포넌트 내부에서 값을 업데이트 한다.

 

선언 방식은 두가지!.

 

1. 생성자를 생성하고 그안에 this.state={ } 이런식으로 만드는 방법

 constructor(props){ //Component로부터 상속받아, Coponent의 메소드를 커스템해서 쓰고 싶어서 생성자 생성.
  super(props);        
  	this.state ={ 
      number : 0
    }
  }
 }

2. 생성자 없이 만드는 방법.

  (...)
  
  state={number:1000} // 생성자 없이 transform-class-속성문법으로 생성자 밖에서 정의가능. 
  
  render(){
  (...)

 

State 값을 업데이트 시 주의사항

 

1. state 값을 변경할때는 반드시 setState로만 가능하다.

2. state에 직접 접근하여 값을 수정하면 컴포넌트를 자동으로 리랜더링하지 않음.

   이때, this.forceUpdate()메서드를 호출하여 강제로 리랜더링할 수도 있으나, 매우 비효율적!

 

배열이나 객체 업데이트시, 사본만들고 사본 값을 업데이트 한 후 사본 값으로 설정하는 식으로 진행한다.