리액트에서 컴포넌트의 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);과 같이 보다 간단하게 표현할 수 있다.
'프론트엔드 기본개념 복습 > React' 카테고리의 다른 글
[React Native] React Native의 작동 원리 (0) | 2022.03.10 |
---|---|
[React] 리액트 최적화하기 (Optimization in React) (0) | 2022.03.10 |
[React] 에러 경계 (Error Boundaries) (0) | 2022.02.24 |
[React] 코드 분할 (Code Splitting) (0) | 2022.02.24 |
[React] React.memo, useCallback (0) | 2022.02.22 |