Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

setState를 사용하여 React에서 상태 관리

애플리케이션 상태를 추적하는 것은 단일 페이지 애플리케이션(SAP)이 변경 사항을 등록하고 사용자에게 렌더링하는 방법입니다. MVC(Model, View, Controller) 프레임워크와 달리 SAP는 사용자를 리디렉션하지 않으므로 클라이언트 측에서 오는 변경 사항을 관리하는 방법이 필요합니다. MVC 프레임워크를 검토하려면 이 가이드를 참조하세요.

React에서 구성 요소 자체는 자체 상태를 관리하고 그에 따라 다시 렌더링할 수 있습니다. 이것은 여기에서 자세히 설명하는 수명 주기 방법을 통해 수행됩니다. 이 기사의 목적을 위해 setState를 사용하여 상태를 변경하는 방법을 살펴보겠습니다.

이 가이드는 React에 대한 기본적인 지식이 있다고 가정합니다. React 기본 사항을 검토하거나 배우기 위해 이 기사에는 최고의 React 학습 리소스가 나열되어 있습니다.

React setState가 무엇인가요?

React setState 메소드는 컴포넌트의 상태를 안정적으로 변경하는 방법입니다. React에서 상태 변경에 대한 몇 가지 특정 지침이 있습니다.

  1. setState는 클래스 구성 요소 내에서만 호출할 수 있습니다. 클래스 구성 요소는 constructor()를 호출합니다. 메소드를 설정하고 초기 상태를 설정합니다. 그런 다음 setState를 호출하여 상태를 더 아래로 변경할 수 있습니다.

    React에는 두 가지 유형의 구성 요소가 있습니다. 기능 구성 요소와 클래스 구성 요소가 있습니다. 우리의 목적을 위해 클래스 구성 요소만 참조합니다. 추가 검토를 위해 기능 구성 요소와 클래스 구성 요소의 차이점에 대한 이 기사를 확인하십시오.
  2. 클래스 구성 요소에서 setState를 호출하기만 하면 this를 사용하여 구성 요소 자체를 직접 참조할 수 있습니다. 예어. this.setState() 호출 모범 사례이며 코드가 손상되지 않도록 합니다.
  3. 상태를 직접 수정하지 마십시오. 상태를 직접 수정하면 다시 렌더링하기 위해 React에 등록되지 않습니다. 상태 변경의 요점은 해당 구성 요소를 다시 렌더링하여 변경 사항을 사용자에게 다시 반영하는 것입니다.

이제 이러한 지침의 맥락에서 구문을 살펴보겠습니다.

setState 반응 구문

첫 번째 지침부터 클래스 구성 요소 내에서만 setState를 사용할 수 있음을 알 수 있습니다. 예를 들어 쇼핑 앱이 있고 장바구니를 구현하려고 한다고 가정합니다. Cart라는 클래스 구성 요소를 설정할 수 있습니다. 이 구성 요소는 사용자가 장바구니에 항목을 추가할 때 자체 상태를 관리하는 역할을 합니다. 

class Cart extends React.Component {
  constructor(props){
    super(props);
    this.state = {shoppingCart: []}
  }

위의 코드를 분해하여 클래스 구성 요소 Cart를 선언합니다. 모든 클래스 구성 요소와 마찬가지로 우리는 확장합니다. 리액트.컴포넌트. 이것은 상용구 React 구문입니다.

이 구성 요소에 상태를 할당하고 싶기 때문에 생성자 메서드를 호출해야 합니다. 그런 다음 기본 생성자가 super(props)로 호출됩니다. . props로 호출되지 않은 기본 생성자를 볼 수 있습니다. 공식 React 문서에서는 기본 생성자 메서드가 항상 props와 함께 호출되어야 한다고 주장합니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

상태를 유지하는 클래스 구성 요소를 구성하는 필수 React 구문을 통해 만들었으므로 초기 상태를 할당할 준비가 되었습니다. 상태를 직접 참조할 수 있는 유일한 시간입니다. this.state = {shoppingCart: [] }를 호출하여 상태 할당 장바구니의 초기 상태를 빈 배열로 설정할 수 있습니다.

반응 setState 예제

위 섹션에서 초기 상태 선언과 관련된 구문을 살펴보았습니다. 생성자 메서드에서 상태가 설정되면 평소와 같이 렌더링할 수 있습니다. 

class Cart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      shoppingCart: []
    }
  }
  render() {
    return (
     <div>
     <h1>Your Shopping Cart</h1>
     <div>{this.state.shoppingCart}</div>
     </div>

    );
  }
}
ReactDOM.render(
  <Cart />,
  document.getElementById('root')
);

여기에 초기 상태가 설정된 Cart 클래스 구성 요소가 있고 render 메서드의 return 문에서 카트를 렌더링합니다. setState를 사용하여 카트를 업데이트하는 방법을 살펴보겠습니다.

이전에 추가한 항목을 유지하면서 shoppingCart에 새 항목을 추가하는 함수를 정의합니다. JavaScript의 스프레드 연산자(…)를 사용하여 초기 상태의 복사본을 만들고 새 상태로 업데이트합니다. 이렇게 하면 장바구니에 추가된 모든 항목이 담깁니다. 

addItem(newItem) {
    this.setState({
     shoppingCart: [...this.state.shoppingCart, newItem]
    })
  }

버튼이 클릭되면 사용자가 해당 항목을 추가할 수 있도록 하려면 버튼의 버튼에 대한 React의 onClick 속성 내에서 addItem 함수를 사용할 수 있습니다. 우리의 목적을 위해, 함수의 컨텍스트에서 setState를 사용하는 방법을 보는 것으로 충분합니다.

이 기사는 setState를 사용하는 방법을 이해하기 위한 소개를 위한 것이며 완전한 것은 아닙니다.

결론

이 기사에서는 setState가 무엇인지, 사용 방법에 대한 몇 가지 지침, 구문 및 간단한 예를 배웠습니다. 이 글은 더 깊이 파고들어 스스로 구성 요소 상태를 업데이트하는 연습을 하도록 권장하는 입문서입니다.

공식 React 문서에는 더 많은 연습 기회를 제공하는 추가 예제가 있습니다. 단일 페이지 응용 프로그램에서 구성 요소의 상태를 추적하는 것은 사용자에게 변경 사항을 렌더링하는 데 필수적이라는 것을 기억하십시오.