React의 setState 콜백

1. 콜백 인수가 필요한 이유는 무엇입니까?
2. 언제 setState() 콜백을 사용해야 합니까?

언뜻 보면 React 컴포넌트의 .setState() 메소드는 간단해 보입니다. 인수의 변경 사항을 반영하도록 기존 상태를 업데이트합니다. 그러나 많은 사람들은 .setState() 메서드가 또 다른 선택적 인수도 허용한다는 사실을 모릅니다. 이 인수는 상태가 업데이트된 직후에 실행되는 콜백 함수입니다.

보다 안정적인 코드를 작성하려면 .setState() 콜백 함수가 무엇을 하고 어떻게 사용할 수 있는지 이해해야 합니다.

콜백 인수가 필요한 이유는 무엇입니까?

대부분의 React 개발자는 .setState() 메서드가 비동기식이라는 것을 모릅니다. 업데이트가 즉시 발생하지 않습니다. setState() 호출 직후 state의 업데이트된 내용을 읽으려고 하면 실패하거나 잘못된 데이터를 읽을 수 있습니다.

이 문제를 해결하기 위해 setState() 메서드는 또 다른 선택적 인수인 콜백 함수를 사용합니다. 콜백 함수에 지정된 작업은 상태가 업데이트된 후에만 수행됩니다.

언제 setState() 콜백을 사용해야 합니까?

위에서 언급했듯이 setState 호출은 비동기식입니다. 상태 개체를 즉시 업데이트하지 않습니다. 가장 최근 업데이트를 기반으로 확인 또는 기타 작업을 수행하려는 경우 setState() 콜백을 사용하는 것이 좋습니다. 그러나 이러한 작업을 수행하는 유일한 방법은 아닙니다. 이후 섹션에서 대안에 대해 논의합니다.

setState() 콜백은 API 호출, 조건부 오류 발생을 위한 state 내용 확인, state 업데이트 직후 수행해야 하는 기타 작업 유형에 유용합니다. setState() 콜백은 유효성 검사에도 자주 사용됩니다.

예를 들어 <input>을 사용하여 상태를 업데이트하려는 경우 콜백 함수를 사용하여 업데이트된 값을 절대 확실하게 읽을 수 있습니다. 콜백이 없으면 상태의 오래되고 오래된 버전을 확인할 수 있습니다.

코드 예:

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      text: ""
    }
  }
  render() {
    return (
    <div>
    	<h1>Hello World</h1>
   		<input type="text" 
         onChange={(e) => this.setState({text: e.target.value}, 
         () => console.log(this.state.text))}></input>
    </div>
    )
  }
}

콜백 함수 대 render()

회의론자들은 render() 메소드 본문에서 업데이트된 state에 액세스할 수 있는데 왜 setState() 콜백이 필요한지 물을 수 있습니다.

차이점은 render() 메소드는 state가 업데이트될 때마다 실행되는 반면 setState() 콜백은 state의 특정 값을 업데이트한 후에만 실행된다는 것입니다.

async 함수의 .setState()

때때로 .setState() 메소드는 비동기 함수에서 호출될 수 있습니다. 이 경우 상태가 즉시 업데이트되지 않습니다.

this 키워드를 사용하여 state 속성의 값을 읽으면 이전 값을 얻게 됩니다. 반면에 콜백 함수는 async 작업이 완료되면 호출됩니다.

대안

React 문서에서는 개발자가 클래스 구성 요소에만 사용할 수 있는 componentDidUpdate() 수명 주기 메서드를 대신 사용할 것을 권장합니다.

기능 구성 요소의 경우 useEffect()는 componentDidUpdate()를 포함한 모든 수명 주기 후크를 효과적으로 대체할 수 있습니다. 종속성 배열을 사용자 지정하기만 하면 됩니다.

예를 들어 상태에 age 속성이 있고 상태가 업데이트된 후 해당 값을 확인하려는 경우 useEffect() 후크는 다음과 같습니다.

useEffect(()=>console.log(`doing something with ${this.state.age}`), [age])