반응 상태 이벤트 처리 — 2
이 기사는 Flutterwave의 후원을 받았습니다. Flutterwave는 전 세계 어디에서나 고객으로부터 온라인과 오프라인으로 결제를 하고 수락하는 가장 쉬운 방법입니다. 완전 무료입니다!
이전 기사에서는 클래스 기반 함수가
state
속성을 사용하여 현재 Person 개체 값을 보유하지만 버튼을 클릭하면 setState
메서드에 의해 재정의되는 방법을 살펴보았습니다. 즉, 클릭 시 state
속성 개체가 setState
메서드 개체로 업데이트됩니다.다음은 코드가 어떻게 생겼는지입니다.
사람/Person.js
import React from 'react';
import { Component } from 'react';
import './App.css';
import Person from './Person/Person';
class App extends Component {
state = {
persons: [
{ name: 'Bello', language: 'React', id: '2sdr3' },
{ name: 'Michael', language: 'Vue', id: 'de6c3' },
{ name: 'Mary', language: 'Angular', id: 'c1z3x' }
]
};
personHandler = () => {
this.setState({
persons: [
{ name: 'Andela', language: 'Ember', id: '2sdr3' },
{ name: 'John', language: 'Backbone', id: 'de6c3' },
{ name: 'Mary', language: 'Angular', id: 'c1z3x' }
]
})
};
render() {
return (
<div>
<Person
name={this.state.persons[0].name}
language={this.state.persons[0].language}
id={this.state.persons[0].id} />
<Person
name={this.state.persons[1].name}
language={this.state.persons[1].language}
id={this.state.persons[1].id} />
<Person
name={this.state.persons[2].name}
language={this.state.persons[2].language}
id={this.state.persons[2].id} />
<button
onClick={this.personHandler}>Change Person State</button>
</div>
);
}
}
export default App;
PersonHandler
는 버튼을 클릭할 때마다 실행되는 함수 호출일 뿐입니다.반응 후크
과거에는 클래스 기반 구성 요소가 상태 속성을 관리하는 유일한 방법이었지만 이제는 이를 관리하는 새로운 접근 방식이 있습니다. React 16.8의 새로운 기능인 *React hooks *를 사용하면 이제 기능적 구성 요소에서 구성 요소를 관리할 수 있습니다.
React Hooks is the collection of functions that you can use in functional components.
useState
는 가장 중요한 React Hook입니다. React 라이브러리에서 useState
(Component
아님)를 가져오면 기능 구성 요소의 상태를 성공적으로 관리할 수 있습니다. useState
는 구성 요소의 초기(현재) 값 또는 데이터를 보유하는 객체입니다.두 번째 상태는 기능 구성 요소에서 상태 업데이트를 허용하는 기능입니다.
아래 예에서 배열 구조 분해는 현재 상태 값과 최종 상태 값을 유지하는 데 사용됩니다.
아래 예를 참조하십시오.
import React from 'react';
import { useState } from 'react';
import './App.css';
import Person from './Person/Person';
const App = () => {
const [state, setState] = useState({
persons: [
{ name: 'Bello', language: 'React', id: '2sdr3' },
{ name: 'Michael', language: 'Vue', id: 'de6c3' },
{ name: 'Mary', language: 'Angular', id: 'c1z3x' }
]
});
const personHandler = () => {
setState({
persons: [
{ name: 'Andela', language: 'Ember', id: '2sdr3' },
{ name: 'John', language: 'Backbone', id: 'de6c3' },
{ name: 'Mary', language: 'Angular', id: 'c1z3x' }
],
})
};
return (
<div>
<Person
name={state.persons[0].name}
language={state.persons[0].language}
id={state.persons[0].id} />
<Person
name={state.persons[1].name}
language={state.persons[1].language}
id={state.persons[1].id} />
<Person
name={state.persons[2].name}
language={state.persons[2].language}
id={state.persons[2].id} />
<button
onClick={personHandler}>Change Person State</button>
</div>
);
};
export default App;
메모
UseState
는 초기 상태와 최종 상태라는 정확히 두 요소의 배열을 반환합니다. 요소의 이름은 설명이 아닌 이름으로 지정할 수 있습니다. useState
가질 수 있습니다. 이것은 React Hooks의 눈을 뜨게 하는 것입니다. 추후 별도의 글에서 자세히 설명드리겠습니다.
행복한 코딩!!!
테크스택 | 플러터웨이브
Flutterwave에서 후원하는 Techstack 기사. Flutterwave는 전 세계 어디에서나 고객으로부터 온라인과 오프라인 모두에서 결제를 하고 수락하는 가장 쉬운 방법입니다. 완전 무료입니다! 또한 signup 을(를) 사용할 때 Flutterwave 달러 교환 카드를 받습니다. 온라인 상점을 열고 전 세계 어디에서나 비즈니스를 수행하십시오.
Sign up today to get started
Support 내가 하는 일과 계속해서 무료 콘텐츠를 만들도록 밀어붙이는 것.
Reference
이 문제에 관하여(반응 상태 이벤트 처리 — 2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/bello/react-state-events-handling-2-i91텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)