도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

`setState` 메쏘드 파라미터로 객체 대신 함수 사용하기(Using a function in `setState` instead of an object)

리액트(React)의 공식 문서가 최근에 개정되었다. 아직 확인하지 않았다면 확인해보자! 나는 최근에 "리액트 용어집"을 만드는 것을 조금 도와 주며 새로운 문서를 철저하게 읽었다. 문서를 보면서 상대적으로 알려지지 않은 측면의`setState`를 발견했고 이 트윗에서 영감을 얻었다:


 

그래서 이것의 작동 방법에 대한 글을 쓰기로 했다.

먼저, 약간의 배경 지식

리액트의 컴포넌트는 보통 자체 상태(state)가 포함 된 독립적이고 재사용 가능한 코드 조각(pieces of code)이다. 이것은 어플리케이션의 UI를 구성하는 리액트 엘리먼트(element)를 반환한다. 로컬 상태를 포함하는 컴포넌트에는 state라는 속성(property)이 있다. 어플리케이션의 모양이나 동작을 변경하려면 컴포넌트의 상태를 변경해야한다. 그렇다면 컴포넌트의 상태를 어떻게 업데이트 할까? 리액트 컴포넌트에는 setState라는 메쏘드가 있다. this.setState 메쏘드를 호출하면 리액트는 컴포넌트를 다시 렌더링하고 DOM을 업데이트한다.

일반적으로 컴포넌트를 업데이트 하고 싶다면 setState 메쏘드에 새로운 값의 객체를 전달하여 setState를 호출하면 된다: this.setState ({someField : someValue})

그러나 때로는 컴포넌트의 현재 상태를 기반으로 하여 컴포넌트 상태(state)를 업데이트해야 할 때가 있다. 컴포넌트의 다음 상태(state)를 업데이트하기 위해 this.state에 직접 접근하는 것은 신뢰할 수 있는 방법이 아니다. 리액트 문서에는 아래와 같이 쓰여있다:

this.propsthis.state는 비동기적(asynchronously)으로 업데이트 될 수 있으므로 다음 상태(state)를 계산하는 데는 이 값을 의존해서는 안됩니다.

이것의 핵심은 비동기적(asynchronously)이라는 것에 있다. this.setState가 호출 된다고 해서 DOM이 즉시 업데이트 되는 것이 아니다. 리액트의 배치 프로세스를 통해 효과적으로 리렌더링(re-rendered) 된다.

예제

Shopsifer에서 setState를 사용하는 일반적인 예를 살펴 보자. 사용자가 피드백 을 제출하면 감사 메시지를 표시하는 폼이 있다:


 

피드백 페이지의 컴포넌트에는 피드백 폼 또는 감사 메시지 중 어떤 것을 표시할지 여부를 결정하는 showForm boolean state가 있다. 피드백 폼 컴포넌트의 초기 상태(state)는 다음과 같다:

this.state = { showForm : true}

그런 다음 사용자가 제출(submit) 버튼을 클릭하면 이 함수가 호출된다:

submit(){
this.setState({showForm : !this.state.showForm});
}

this.state.showForm의 값에 의존하여 내 폼의 다음 상태(state)를 수정한다. 이 간단한 예제에서는 문제가 발생하지 않을 수 있지만, 어플리케이션이 복잡해지고 여러 setState 호출이 일어난다면 this.state.showForm의 실제 값은 당신이 생각하는 값이 아닐 가능성이 있다.

 

우리가 다음(next) 값을 계산하기 위해 this.state에 의존해서는 안되는 경우라면, 다음(next) 값을 어떻게 계산해야 할까?

`setState`에 파리미터로 함수 사용!

this.setState에 파라미터로 객체를 전달하는 대신 함수를 전달하면 컴포넌트의 현재 상태 값을 안정적으로 가져올 수 있다. 위의 submit 함수는 다음과 같다:

submit(){
this.setState(function(prevState, props){
return {showForm: !prevState.showForm}
});
}

객체가 아닌 setState에 함수를 파라미터로 전달하면 컴포넌트의 상태(state)와 props에 대한 신뢰할 수 있는 값을 얻을 수 있다. 한 가지 주의 할 점은 리액트 문서의 예제에서는 arrow function을 사용 했지만, 여기의 예제에서는 ES5 구문을 사용하고 있으니 주의하자.

setState를 사용하여 컴포넌트를 업데이트하고 다음 상태를 계산하기 위해 현재 state나 props가 필요하다면 setState 메쏘드의 첫 번째 파라미터로 함수를 전달하면 된다. 이것이 실제로 객체 대신 권장되는 솔루션이다. 


더 신뢰할 수 있는 리액트 어플리케이션을 만드는데 도움이 되기를 바란다!


이 글은 Sophia Shoemaker의 Using a function in `setState` instead of an object를 번역한 글입니다. 전문 번역가가 아니라 오역이 있을 수 있습니다. 지적해주시면 수정하도록 하겠습니다. 원문은 아래에서 확인 할 수 있습니다. 감사합니다.

 



리뷰