Change language
Python.Engineering Wiki 자바 스크립트의 설정 상태

자바 스크립트의 설정 상태

__del__ | __main__ Python module | array Python module | code Python module | COM PHP module | copy Python module | dis Python module | DOM PHP module | Ev PHP module | FFI PHP module | gc Python module | html Python module | http Python module | imp Python module | io Python module | JavaScript | keyword Python module | operator Python module | os Python module | PS PHP module | pty Python module | Python functions | re Python module | resource Python module | SPL PHP module | StackOverflow | stat Python module | struct Python module | time Python module | types Python module | UI PHP module
Michael Zippo Michael Zippo

애플리케이션 상태를 추적하는 것은 단일 페이지 애플리케이션(SAP)이 변경 사항을 기록하고 사용자에게 보고하는 방식입니다. 템플릿 프레임워크, 보기, 컨트롤러(MVC)와 달리 SAP는 사용자를 리디렉션하지 않으므로 클라이언트 측에서 예정된 변경 사항을 관리하는 방법이 필요합니다. MVC 프레임워크를 검토하려면 이 가이드를 참조하세요.

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

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

React setState란 무엇입니까?

React setState 메소드는 컴포넌트의 상태를 안정적으로 변경하는 것과 같습니다. React에서 상태를 변경하기 위한 몇 가지 특정 규칙이 있습니다.

  1. setState는 클래스 구성 요소에서 호출할 수 없습니다. 클래스의 구성 요소는 생성자() 메서드 를 호출하고 초기 상태로 설정합니다. 그런 다음 setState를 호출하여 상태를 더 아래로 변경할 수 있습니다.
    React에는 두 가지 유형의 구성 요소가 있습니다. 기능적 구성 요소와 클래스 구성 요소입니다. 우리의 목적을 위해, 우리는 클래스의 구성 요소에 대해서만 이야기하고 있습니다. 기능 구성 요소와 클래스 구성 요소의 차이점에 대한 이     기사 를 더 자세히 살펴보십시오.
  2. 클래스 구성 요소의 경우 this 키워드를 사용하여 구성 요소 자체를 직접 참조할 수 있습니다. this.setState()를 호출하는 것이 모범 사례이며 코드가 손상되지 않도록 합니다.
  3. 상태를 직접 수정하지 마십시오. React to Spawning에서는 직접적인 상태 변경이 기록되지 않습니다. 상태 변경의 요점은 해당 구성 요소의 새로운 해석을 트리거하여 사용자의 변경 사항을 반영하는 것입니다.

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

setState React 구문

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

위의 코드를 분해하여 Cart 클래스 구성 요소를 선언합니다. 모든 클래스 구성 요소와 마찬가지로 react .Component를 확장합니다. 이것이 표준입니다. React 구문.

이 창에 상태를 부여하고 싶기 때문에 생성자 메서드를 호출해야 합니다. 따라서 기본 생성자는 수퍼(소품)와 함께 호출됩니다. props로 호출되지 않은 기본 빌더를 볼 수 있습니다. 공식 React 문서에서는 기본 생성자 메서드를 항상 props로 호출해야 한다고 요청합니다.

이제 상태를 유지하기 위한 클래스 구성 요소를 빌드하는 데 필요한 React 구문을 완료했으므로 초기 상태에 영향을 줄 준비가 되었습니다. 이때 상태를 직접 참조할 수 있는 유일한 시간입니다. this.state =.{ShoppingCart: []}를 호출하면 장바구니의 초기 상태를 빈 배열로 설정할 수 있습니다. <

h2> React 예제 setState

이전 섹션에서 초기 상태 선언과 관련된 구문을 조사했습니다. 일단 상태가 생성자 메서드에서 설정되면 평소와 같이 렌더링할 수 있습니다.

장바구니

); }} ReactDOM.render(<카트 />, document.getElementById(`루트`));

여기에는 초기 상태가 바구니로 설정된 클래스 구성 요소가 있으며 렌더링 메서드의 반환 선언에 바구니를 표시합니다. setState를 사용하여 장바구니를 업데이트하는 방법을 살펴보겠습니다.

이전에 추가한 항목을 유지하면서 장바구니에 새 항목을 추가하는 기능을 정의합니다. JavaScript 확산(.. .) 연산자를 사용하여 초기 상태의 복사본을 만들고 새 상태로 최신 상태로 만듭니다. 이러한 방식으로 바구니에는 추가된 모든 요소가 포함됩니다.

버튼의 onClick React 속성에 addItem 함수를 사용할 수 있습니다. 버튼 클릭 .우리의 목적을 위해 함수의 일부에서 setState를 사용하는 방법은 충분합니다. cient.

이 문서는 setState를 사용하는 방법을 이해하기 위한 소개로 작성되었으며 완전한 것은 아닙니다.

결론

이 문서에서 우리는 setState가 무엇인지, 사용법에 대한 지침, 구문 및 짧은 예를 배웠습니다. 이것은 더 깊이 파고들고 구성 요소의 상태를 업데이트하는 연습을 권장하는 기사 기반으로 되어 있습니다.

공식 React 문서 에는 더 많은 연습 기회를 제공할 추가 예제가 포함되어 있습니다. 기억하십시오. 단일 페이지의 애플리케이션에서 구성 요소의 상태를 추적하는 것은 사용자를 변경하는 데 필수적입니다.