REACTJS: 상태 이해

** 반응 상태 이해하기**

많은 웹 앱은 예를 들어 사용자 상호 작용(버튼 클릭, 양식 제출 등) 후에 데이터를 변경하기 위해 구성 요소가 필요합니다.
단, 소품은 변경할 수 없습니다.

구성 요소가 데이터를 관리하고 변경할 수 있도록 하기 위해 React는 상태라는 기능을 제공합니다.
state는 클래스 컴포넌트에 속성으로 추가되는 객체입니다.

예를 들어

`class Hello extends React.Component {
 state = {
    name: "James"
 }
 render() {
return <h1>Hello {this.state.name}.</h1>;
  }
}
`

보시다시피 상태는 키:값 쌍을 포함하는 단순한 객체입니다.
소품과 유사하게 this.state를 사용하여 값에 액세스할 수 있습니다.
이제 구성 요소가 렌더링될 때 상태가 지정된 값으로 초기화되고 "Hello James"라는 제목이 표시됩니다.

상태 변경

상태를 직접 수정하면 안 됩니다. 대신 React는 상태를 수정하는 데 사용할 수 있는 setState() 메서드를 제공합니다.

단순히 개체 속성의 값을 직접 변경하는 대신 setState를 사용해야 하는 이유는 무엇입니까?
대답은 React의 가장 유용한 기능 중 하나를 밝혀냅니다. setState가 호출되면 React는 영향을 받는 구성 요소를 새 상태로 자동으로 다시 렌더링합니다.

일반적으로 상태 변경은 이벤트 핸들러에서 발생합니다.

카운터 앱

상태가 작동하는 방식을 더 잘 이해하기 위해 버튼을 클릭할 때마다 카운터를 증가시키는 카운터 앱을 만들어 보겠습니다.
카운터와 버튼을 포함하는 Counter 구성 요소를 만드는 것으로 시작합니다.

class Counter extends React.Component {
  state = {
    counter: 0
  }
  render() {
     return <div>
      <p>{this.state.counter}</p>
      <button>Increment</button>
      </div>;
    }
  }

카운터를 상태의 값 0으로 초기화했습니다.

이제 버튼에 클릭 이벤트 핸들러를 추가하고 상태에서 카운터를 증가시켜야 합니다.

class Counter extends React.Component {
  state = {
    counter: 0
  }
  increment = () => {
    this.setState({
       counter: this.state.counter+1});
   }
   render() {
      return <div> 
       <p>{this.state.counter}</p>
       <button onClick={this.increment}>Increment</button>
      </div>;
    }
}

onClick 이벤트는 카운터 값을 변경하기 위해 setState를 사용하는 컴포넌트의 증가 함수를 호출합니다. 상태가 변경되면 React는 구성 요소의 다시 렌더링을 자동으로 트리거합니다.

소품 대 상태

요약하자면 다음은 props와 state의 주요 차이점을 요약한 것입니다.

소품을 사용하여 데이터를 구성 요소에 전달합니다.

구성 요소는 상태를 사용하여 데이터를 관리합니다.

소품은 읽기 전용이며 수정할 수 없습니다.

state는 setState() 메서드를 사용하여 구성 요소에서 수정할 수 있습니다.

setState() 메서드는 영향을 받는 구성 요소를 다시 렌더링합니다.