[React] state 갱신하기

리액트에서 컴포넌트의 state를 제대로 갱신하기 위해서 주의해야 할 점을 간략히 정리해보겠다.

 

1. state 직접 수정하지 않기

  컴포넌트의 state를 변경하고 싶으면 setState( ) 메소드를 활용해야 한다. 그냥 state에 값을 대입하는 경우 값의 갱신은 이루어질 수 있더라도 컴포넌트가 리렌더링되어야 한다는 사실을 알지 못하기 때문이다. (state에 직접 값을 대입하는 경우는 클래스 컴포넌트의 constructor( ) 메소드 내부 말고는 없다.)

 

2. state의 갱신은 원하는대로 이루어지지 않을 수 있다.

  컴포넌트의 state 혹은 props는 비동기적으로 업데이트될 수 있다. 그렇기 때문에 state나 props에 의존하여 새로운 state를 지정해줄 때에는 주의가 필요하다. 이럴 때에는 setState 내부에 갱신될 값이 아니라 함수를 넣어주면 된다. 해당 함수는 첫 번째 인자로 이전 state를 가지고 두 번째 인자로 갱신 이후의 props를 가지며 새로운 state를 반환한다.

 

 

위 두 가지를 Counter 컴포넌트 예시에 적용시켜 보겠다.

 

  이해를 위해 자세히 기술하였지만 counter의 경우 평소 사용할 때 setCount(prev => prev + 1);과 같이 보다 간단하게 표현할 수 있다.