최근에 정말 중요한 이슈를 하나 마주쳤다. 내가 구현한 컴포넌트 하나가 무한 렌더링에 빠져 성능을 매우 저해하고 있었다. 처음엔 왜 이 컴포넌트가 계속 렌더링되지...? 하고 의아했는데, 파고들수록 리액트의 내부 동작 원리에 대해 알게되어 정리하고자 한다.문제의 시작ProSeqViewer라는 시각화 라이브러리를 쓰고 있었는데, 이 라이브러리는 내부적으로 DOM을 직접 조작한다. React스럽지 않지만 Protein sequence를 렌더링하는 라이브러리로는 이것만한 것이 없어 어쩔 수 없이 사용해야만 했다. 이 컴포넌트는 sequences라는 배열 데이터를 받아서 시각화해주는데, 문제는 이 배열이 자꾸 컴포넌트를 리렌더링시키고 있다는 점이었다.const ProSeqViewer = ({ consensus,..