[React] setState 함수형으로 사용하기

이 글은 아래 블로그를 참조해서 공부하면서 정리한 글입니다. 자세한 정보는 아래 글 참조 

medium.com/@saturnuss/setstate-%EB%A5%BC-%ED%95%A8%EC%88%98%ED%98%95%EC%9C%BC%EB%A1%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-763402cbc3e5

setState 를 함수형으로 사용하기

• 리액트 상태를 업데이트 하기 위해서는 setState()메소드 호출한다
• setState()는 업데이트 할 부분을 포함하는 객체를 인자로 받는다. 그리고 인자로 받아온 객체를 state에 머지하는 방식으로 상태를 업데이트 한다.
• 머지된 객체로 재조정을 하고 새로운 트리를 그려서 변경된 부분만 DOM을 업데이트 한다.

this.state.value=1
this.setState({value:this.state.value+1});
this.setState({value:this.state.value+1});
this.setState({value:this.state.value+1});

자주 등장하는 예시로 class형 컴포넌트에서 setState함수를 여러 번 호출할 경우 마지막 하나만 적용이 되는 것을 볼 수 있다. 즉 비동기적으로 동작한다.

 

setState 상태 업데이트 방식

리액트는 setState가 여러 번 호출되면 한꺼번에 처리한다.

매번 호출한대로 업데이트 하지 않고 인자로 전달된 객체를 하나로 합쳐서 업데이트 하기 때문이다.

-> 오브젝트 컴포지션 

const obj=Object.assign({},objectState1,objectState2,objectState3);

객체가 동일한 키를 가지면 마지막에 전달된 객체의 키 값으로 덮어 씌어진다 

 

const first={beer:'cas'}
const second={beer:'max'}

const combinedObj=Object.assign({},first,second);
console.log(combinedObj) // {beer:'max'}

이렇게 비동기적으로 상태가 업데이트되기 때문에 원하지 않는 갱신이 이루어지기도 한다.

해결법 -> 함수를 받는 setState

 

this.state.value=1
this.setState((state,props)=>({value:this.state.value+1}));
this.setState((state,props)=>({value:this.state.value+1}));
this.setState((state,props)=>({value:this.state.value+1}));

• 함수를 인자로 전달받은 setState는 원하는 시점의 상태를 가지고 업데이트 한다.
• merge할 객체가 없어서 호출된 순서대로 함수를 큐에 넣는다
• 큐의 각 함수를 호출하여 함수형 setState의 이전 상태를 전달하여 상태를 업데이트한다 
• 이제 함수를 외부에 선언하고 가져다 쓸 수 있다 

function buyBeer(state,props){
return {beer:state.beer+1}
}

class Freezer{
...

buyBeer(){
this.setState(buyBeer);
}
}

이렇게 외부 함수를 컴포넌트 안에서 사용할 수 있다 

 

상태 업데이트 부분이 컴포넌트 밖으로 빠지기 때문에 테스트를 할 때도 유용하다