[React] Warning: Cannot update a component(`app`) while rendering a different component

해당 오류가 발생한 이유

React에서 해당 컴포넌트가 랜더링되는 동안 App 컴포넌트의 상태를 업데이트 하려고 할 때 발생한다. 이는 React에서는 권장하지 않기 때문에, 한 컴포넌트가 랜더링 중일 때 다른 컴포넌트의 상태를 변경하려고 하지 않는다.

나는 왜 발생했는가.

지금 오픈소스 간트 차트 라이브러리를 커스터마이징하고 있다. 거기서 내가 필요한 기능 중 하나가 today라는 버튼을 클릭하면, 오늘 날짜로 이동해야하는데 그 기능은 오픈소스에 구현이 되어 있지 않아서 내가 구현하고 있다. 처음에 거의 다 구현 했지만 문제가 발생했는데 scrollIntoView라는 함수를 사용했다. 이 함수를 사용하다 보니 내가 원하는 장소로 이동은 하지만 스크롤은 이동하기 전 위치를 기억하고 있어서 다시 스크롤 이동을 했을 때 ux가 정말 안좋겠다는 생각이 들었다. 그래서 이 부분을 해결하기 위해서 새로운 방법을 간구했고, today의 위치를 가져와서 scrollTo라는 함수로 변경해서 적용해보고자 하는 중에 만난 warning이다.

today의 위치를 가져오다 보니. today가 있는 gantt-body component에 app.tsx부터 존재한 setState를 props로 전달하였고, setState값을 변경하는 코드가, gantt-body가 rendering 되기 전에 실행 되다 보니. 해당 오류 즉 gantt-body가 rendering되기 전에 app의 상태를 변경시키려는 상태가 되었다.

어떻게 해결?

useEffect 를 사용하자.! useRef를 사용하고, useEffect를 사용하니 문제가 해결 되었다.useRef는 내가 알기론 HtmlElement에 접근할 때 사용하는 것으로 알고 있는데, 검색해보니 렌더링에 필요하지 않은 값을 참조할 수 있는React Hook 이라고 정의 되어 있다.즉 ref는 값이 변해도 리래더링을 하지 않는다는 것이다. ref로 리랜더링하지 않게 적용해서 리랜더링시 먼저 랜더링 되는 상황을 막았다. 그리고 useEffect를 사용해서 화면이 랜더링 될 때, 작동하는 코드이니 setState의 값을 useEffect에 넣어 해결하였다. 리액트 documentation을 확인해보니, effect와 useEffect가 내 생각보다 더 다양하게 사용 되는 것 같다. 이 부분에 대해서도 포스팅을 한번 징행해야겠다. 물론 useEffect에 대해 더 깊게 사용할 때 해볼 생각이다.