요건 정확히는 warning 이지만 eslint 사용자에게는 뭐 에러나 마찬가지다... 해결해야만 한다
해결도 해결이지만 왜 이 경고가 떴는지를 꼭 알고 넘어가자
에러 원인
하나의 상태에 여러 컴포넌트가 동시에 접근하여 상태가 꼬일수 있으니 해당 두 컴포넌트의 동시 랜더링은 안됩니다! 랜더링 후에 상태를 조작하여 조작한 상태를 바탕으로 랜더링이 되도록 상태 조작은 랜더링 이후로 미뤄주세요!
하나의 상태를 공유하는 두 컴포넌트가 랜더링 될 때, 한 컴포넌트에서 상태 변경이 일어나면 변경된 상태를 가지고 다른 컴포넌트도 동시에 랜더링 할 수 없으므로, 되도록 랜더링이 끝난 다음에 문제의 상태를 조작해서 다른 컴포넌트가 다음 순서로 랜더링 되도록 해주라는 warning 이다. - 내멋대로 이해입니당!
해결 방법
되도록 컴포넌트의 랜더링 구문 뒤에 상태를 변경 구문을 넣자. 랜더링 도중엔 상태 변경을 지양하자
useEffect, 이벤트, 조건문 등을 이용해서 현재 컴포넌트 랜더링이 끝나고 나서야 다른 컴포넌트에 영향을 주는 상태 변화가 실행되게 해주면 warning 이 사라진다!
댓글