🛠 문제 분석

현재 코인 리스트에 어떤 문제점이 있는지 살펴보자.

현재 코인 리스트는 서버로부터 SSE 데이터를 끊임 없이 전달 받으며 화면에 렌더링한다.

이때, 가격이 변한 코인 행(row)뿐만 아니라 가격이 변하지 않은 코인 행까지 리렌더링 되는

문제가 발생했다. 참고로 현재 구조 상 코인 행(row)은 하나하나의 Coin 컴포넌트로 되어 있다.

게다가, 하단에 페이지네이션 버튼 컴포넌트인 **ScrollPageButton 컴포넌트**와 부모인

**CoinList 컴포넌트**까지 리렌더링 되고 있다.

원인를 분석하고자 현재 컴포넌트 구조를 도식화 해보자.

<CoinView>
	<CointList> // 현재 여기서 SSE 데이터를 가져옴
		<Coin/> // props로 CoinList에서 받아온 SSE 데이터를 전달 받아 사용
		<ScrollPageButton/>
	</CointList>
</CoinView>

CoinList 컴포넌트를 좀 더 들여다 보면 다음과 같다.

문제가 발생했던 이유는 간단하다.

CoinList 내부 sseData는 useSSETicker 훅을 통해 실시간으로 받아온 데이터이다.

즉, 컴포넌트 내부의 상태이므로 상태가 실시간으로 변경되니 CoinList 컴포넌트가 리렌더링

되었던 것이다. 또한, 당연하게도 Coin, ScrollPageButton 컴포넌트 역시 자식 컴포넌트이므로

리렌더링 되었던 것이다.