ReactJS setState()
모든 React 구성 요소는 상태 그들과 연관되어 있습니다. 구성 요소의 상태는 사용자가 수행한 작업에 대한 응답이나 시스템에 의해 트리거된 이벤트로 인해 변경될 수 있습니다. 상태가 변경될 때마다 React는 구성 요소를 브라우저에 다시 렌더링합니다. 상태 값을 업데이트하기 전에 초기 상태 설정을 구축해야 합니다. 작업이 끝나면 다음을 사용합니다. setState() 메소드 상태 객체를 변경합니다. 구성 요소가 업데이트되었는지 확인하고 구성 요소를 다시 렌더링해야 합니다.
내용의 테이블
반응 JS setState
setState 비동기 호출은 동기 호출이 호출되면 setState를 사용하여 업데이트한 후 개체의 현재 값을 아는 것처럼 적시에 업데이트되지 않을 수 있으며 콘솔에 현재 업데이트된 값을 제공하지 못할 수 있음을 의미합니다. 동기식 동작을 얻으려면 객체 대신 함수를 setState에 전달해야 합니다.
통사론:
setState()를 사용하면 화살표 함수를 통해서뿐만 아니라 직접 구성 요소의 상태를 변경할 수도 있습니다.
setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({ stateName: prevState.stateName + 1 })) React 애플리케이션을 만드는 단계:
1 단계: 다음 명령을 사용하여 React 애플리케이션을 만듭니다.
npx create-react-app foldername
2 단계: 프로젝트 폴더(예: 폴더 이름)를 생성한 후 다음 명령을 사용하여 해당 폴더로 이동합니다.
cd foldername
프로젝트 구조:
접근법 1: 단일 속성 업데이트 중
내부에 초기 상태 값을 설정합니다. 생성자 함수 그리고 다른 함수를 만들어 보세요 업데이트상태() 상태를 업데이트하기 위해. 이제 버튼을 클릭하면 후자가 다음과 같이 트리거됩니다. onClick 이벤트 이는 상태 값을 변경합니다. 우리는 setState() 메소드를 수행합니다. updateState() 함수 작성:
this.setState({greeting : 'GeeksForGeeks welcomes you !!'}) 보시다시피, 우리는 setState()에 객체를 전달하고 있습니다. 이 객체에는 업데이트하려는 상태의 일부가 포함되어 있습니다. 이 경우에는 인사 . React는 이 값을 가져와서 필요한 객체에 병합합니다. 이는 버튼 구성 요소가 인사말 값을 업데이트하는 데 무엇을 사용해야 하는지 묻고 setState()가 답변으로 응답하는 것과 같습니다.
자바스크립트
// Filename - App.js> import React, { Component } from> 'react'> ;> class App extends Component {> > constructor(props) {> > super> (props);> > // Set initial state> > this> .state = {> > greeting:> > 'Click the button to receive greetings'> ,> > };> > // Binding this keyword> > this> .updateState => this> .updateState.bind(> this> );> > }> > updateState() {> > // Changing state> > this> .setState({> > greeting:> 'GeeksForGeeks welcomes you !!'> ,> > });> > }> > render() {> > return> (> > > > Greetings Portal> > > > {> /* Set click handler */> }> > this.updateState}>클릭 해주세요! ); } } 기본 앱 내보내기;> |
애플리케이션 실행 단계: 프로젝트의 루트 디렉터리에서 다음 명령을 사용하여 애플리케이션을 실행합니다.
npm start
산출: 이제 브라우저를 열고 다음으로 이동하세요. http://localhost:3000/ , 다음 출력이 표시됩니다.
접근법 2: 여러 속성 업데이트
구성 요소의 상태 개체에는 여러 속성이 포함될 수 있으며 React에서는 setState() 함수를 사용하여 해당 속성의 하위 집합만 업데이트할 수 있을 뿐만 아니라 여러 setState() 메서드를 사용하여 각 속성 값을 독립적으로 업데이트할 수 있습니다.
세 가지 다른 속성을 초기화하여 초기 상태를 설정한 다음 함수를 만듭니다. 업데이트상태() 호출될 때마다 값을 업데이트합니다. 다시 한 번 이 기능은 다음과 같이 트리거됩니다. onClick 이벤트 동시에 우리는 상태의 업데이트된 값을 얻습니다.
자바스크립트
// Filename - App.js> import React, { Component } from> 'react'> ;> class App extends Component {> > constructor(props) {> > super> (props);> > // Set initial state> > this> .state = {> > test:> 'Nil'> ,> > questions:> '0'> ,> > students:> '0'> ,> > };> > // Binding this keyword> > this> .updateState => this> .updateState.bind(> this> );> > }> > updateState() {> > // Changing state> > this> .setState({> > test:> 'Programming Quiz'> ,> > questions:> '10'> ,> > students:> '30'> ,> > });> > }> > render() {> > return> (> > > > Test Portal> > > > > > > > {> /* Set click handler */> }> > this.updateState}>클릭 해주세요! ); } } 기본 앱 내보내기;> |
애플리케이션 실행 단계: 프로젝트의 루트 디렉터리에서 다음 명령을 사용하여 애플리케이션을 실행합니다.
npm start
산출: 이제 브라우저를 열고 다음으로 이동하세요. http://localhost:3000/ , 다음 출력이 표시됩니다.
접근법 3: props를 사용하여 상태 값 업데이트
문자열 배열을 설정했습니다. 테스트주제 우리 구성 요소의 소품으로. 기능 주제 목록 모든 문자열을 우리 상태의 목록 항목으로 매핑하기 위해 생성되었습니다. 주제 . 함수 업데이트상태 트리거되고 항목을 나열하도록 주제를 설정합니다. 버튼을 클릭하면 업데이트된 상태 값을 얻습니다. 이 방법은 복잡한 데이터를 처리하고 상태를 매우 쉽게 업데이트하는 것으로 잘 알려져 있습니다.
자바스크립트
// Filename - App.js> import React, { Component } from> 'react'> ;> class App extends Component {> > static defaultProps = {> > testTopics: [> > 'React JS'> ,> > 'Node JS'> ,> > 'Compound components'> ,> > 'Lifecycle Methods'> ,> > 'Event Handlers'> ,> > 'Router'> ,> > 'React Hooks'> ,> > 'Redux'> ,> > 'Context'> ,> > ],> > };> > constructor(props) {> > super> (props);> > // Set initial state> > this> .state = {> > testName:> 'React js Test'> ,> > topics:> ''> ,> > };> > // Binding this keyword> > this> .updateState => this> .updateState.bind(> this> );> > }> > listOfTopics() {> > return> (> > > > > {> this> .props.testTopics.map((topic) =>(> > {topic}> > ))}> > > > );> > }> > updateState() {> > // Changing state> > this> .setState({> > testName:> 'Test topics are:'> ,> > topics:> this> .listOfTopics(),> > });> > }> > render() {> > return> (> > > > Test Information> > > > > > {> /* Set click handler */> }> > this.updateState}>클릭 해주세요! ); } } 기본 앱 내보내기;> |
애플리케이션 실행 단계: 프로젝트의 루트 디렉터리에서 다음 명령을 사용하여 애플리케이션을 실행합니다.
npm start
산출: 이제 브라우저를 열고 다음으로 이동하세요. http://localhost:3000/ , 다음 출력이 표시됩니다.
접근법 4: 이전 값을 사용하여 상태를 업데이트합니다.
초기 상태를 생성합니다 세다 0의 값을 갖는다. 함수 업데이트상태() 호출될 때마다 상태의 현재 값을 1씩 증가시킵니다. 이번에는 화살표 함수에서 setState() 메서드를 사용합니다. 이전상태 매개변수로. 상태의 현재 값은 다음을 사용하여 액세스됩니다. 이전상태.상태이름 버튼을 누를 때마다 1씩 증가합니다. 이 방법은 이전 값에 따라 달라지는 방식으로 상태의 값을 설정할 때 정말 유용합니다. 예를 들어 , 부울(true/false)을 전환하거나 숫자를 증가/감소시킵니다.
자바스크립트
// Filename - App.js> import React, { Component } from> 'react'> ;> class App extends Component {> > constructor(props) {> > super> (props);> > // Set initial state> > this> .state = {> > count: 0,> > };> > // Binding this keyword> > this> .updateState => this> .updateState.bind(> this> );> > }> > updateState() {> > // Changing state> > this> .setState((prevState) =>{> > return> { count: prevState.count + 1 };> > });> > }> > render() {> > return> (> > > > Click Counter> > > > {> /* Set click handler */> }> > this.updateState}>클릭 해주세요! ); } } 기본 앱 내보내기;> |
애플리케이션 실행 단계: 프로젝트의 루트 디렉터리에서 다음 명령을 사용하여 애플리케이션을 실행합니다.
npm start
산출: 이제 브라우저를 열고 다음으로 이동하세요. http://localhost:3000/ , 다음 출력이 표시됩니다.
