반응 setState()

우리 집단이 React에 대해 배우기 시작하면서 우리가 배운 첫 번째 개념 중 하나는 state와 props의 사용입니다. 사전 지식이 없으면 처음에는 확실히 정신이 아찔했습니다. 물론 여러 실험실 실습 후에 가라앉기 시작했습니다. 이 블로그가 더 나은 이해에 도움이 되기를 바랍니다.

상태 대 소품

계속 진행하기 전에 State와 Props를 구분하고 싶었습니다. 솔직히 이해하기 어려웠던 부분이 먼저였기 때문입니다.

State는 특정 구성 요소 내부에서 유지 관리되는 데이터이고 Props는 상위 구성 요소에서 전달된 데이터입니다.

주요 차이점은 해당 데이터를 소유하는 구성 요소입니다. Props는 읽기 전용이며 콜백 함수도 props로 전달되는 경우 하위 구성 요소에서만 업데이트할 수 있습니다. 그런 다음 콜백 함수는 상위 구성 요소 상태의 업스트림 업데이트를 트리거합니다.

이제 컴포넌트의 상태를 업데이트할 함수에 대해 이야기해 봅시다.

TLDR

• setState() is asynchronous
• pass a function instead of an object if you are doing some kind of calculations based on the actual current state
• setState() can accept a callback function

setState()

setState()를 사용하는 것은 기본적으로 구성 요소의 상태를 업데이트하기 위해 약속을 잡는 것입니다. setState()가 비동기식이기 때문에 약속이라고 말합니다. setState()를 호출하면 호출한 후 정확히 업데이트되지 않습니다. 아래 예제 코드를 보십시오.

import React, { Component } from 'react';

class App extends Component {

    state = { count : 0 }

    handleClick = () => {
        this.setState({count: this.state.count + 1 })
        this.setState({count: this.state.count + 1 })
        this.setState({count: this.state.count + 1 })
        console.log(this.state.count)
        // this.state.count logs 0 in the first click
        // this.state.count logs 1 after the second click
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick}>Add 3</button>
            </div>
        );
    }
}

export default App

버튼을 클릭한 후 handleClick 상태를 업데이트한 다음 console.log 3을 업데이트할 것으로 예상할 수 있지만 실제로는 0이 됩니다. 또한 버튼을 두 번째 클릭하면 console.log 1 왜 이런 일이 발생합니까? 다른 2setState() 호출을 무시하고 있습니까? 그렇지 않다.

React는 의도적으로 대기하고 배치setState()가 더 나은 성능을 요구합니다. 이것의 주된 이유는 구성 요소의 상태가 변경되면 구성 요소가 응답으로 다시 렌더링되기 때문입니다. 이것은 중요합니다. 버튼 클릭이 자식 구성 요소에 대해 setState()를 호출하고 부모 구성 요소에 대해 setState()를 호출한다고 가정해 보겠습니다. 자식이 두 번 다시 렌더링하는 것을 원하지 않습니다. 앱이 더 복잡해지면 비용이 많이 들고 브라우저가 응답하지 않을 수 있습니다.

이전 상태()

비동기 특성을 염두에 두고 이것은 this.state를 신뢰할 수 없게 만듭니다. 이전 예제로 돌아가서 각 setState() 호출은 업데이트되기 전에 this.state를 살펴봅니다. 현재 상태에 의존하는 값으로 상태를 업데이트하는 경우 개체 대신 function()에 setState()를 전달합니다.

위의 코드를 수정하여 아래 코드를 보십시오.

import React, { Component } from 'react';

class App extends Component {

    state = { count : 0 }

    handleClick = () => {
        this.setState(prevState => {
            return {count: prevState.count + 1 }})


        this.setState(prevState => {
            return {count: prevState.count + 1 }})


        this.setState(prevState => {
            return {count: prevState.count + 1 }})
        console.log(this.state.count)
        // this.state.count logs 0 in the first click
        // this.state.count logs 3 after the second click
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick}>Add 3</button>
            </div>
        );
    }
}

export default App

버튼을 처음 클릭하면 여전히 console.log 0이지만 두 번째로 클릭하면 구성 요소가 다시 렌더링되고 3으로 기록됩니다. 스프레드 연산자는 다음과 같습니다.

state = { arr : [{obj1}, {obj2}, {obj3}]  }

handleClick = () => {
    this.setState(prevState => {
      return {array: [...prevState.arr, {newObj}]}
    })
}

참고:

• The function above takes the the most updated this.state.arr
• Uses the ... spread operator to make a copy of that arr
• Adds a new object
• Updates state using setState()

객체 대신 함수를 사용하는 이점은 가장 업데이트된 상태에 대한 액세스를 제공하고 순서대로 실행되도록 setState() 호출을 대기열에 넣습니다.

콜백()

이제 첫 번째 클릭 후에도 여전히 "0"이 표시되는지 궁금합니다.

마지막으로 중요한 것은 setState() 실제로 해야 할 일을 수행한 후 업데이트된 상태에 어떻게 액세스합니까? setState() 콜백 함수를 사용할 수 있습니다.

아래 기능에서 마지막 조정:

 state = { count : 0 }

    handleClick = () => {
        this.setState(prevState => {
            return {count: prevState.count + 3 }}, () => {
                console.log(this.state.count)
                // this.state.count logs 3
            })
            console.log(this.state.count)
            //this.state.count logs 0

    }

두 번째 console.log는 범위 밖에 있으므로 setState() 상태 설정이 완료되기 전에 실행되므로 0을 기록합니다.

기본적으로 콜백 함수는 setState() 발생 후 실행되므로 이 범위에서는 가장 업데이트된 상태에 액세스할 수 있습니다.

결론

이것이 좀 더 명확해졌기를 바랍니다. 읽어주셔서 감사합니다. 의견이나 제안 사항이 있으면 저에게 연락해 주십시오.