Closed kongyb closed 1 year ago
디테일 페이지 실시간 코인가격정보 컴포넌트가 가격이 변경된 코인컴포넌트만 리렌더링이 일어나도록 수정
이거 좀 츄라이 해봤는데 어떤 방식으로 진행하실 예정이신지 궁금합니다.
디테일 페이지 실시간 코인가격정보 컴포넌트가 가격이 변경된 코인컴포넌트만 리렌더링이 일어나도록 수정
이거 좀 츄라이 해봤는데 어떤 방식으로 진행하실 예정이신지 궁금합니다.
CoinPriceTab
컴포넌트에 React의 memo를 적용하여 해결했습니다.
RealTimeCoinPrice로 전달되는 props는 여러개의 코인들의 가격정보가 들어있는 CoinPriceObj
타입이지만, 각각의 가격정보를 나타내는 컴포넌트(CoinPriceTab
)에 전달되는 props는 CoinPrice
타입이므로, 1초동안 변경된 이력이 있는 CoinPrice
타입의 props가 변경된 코인의 컴포넌트만 리렌더링하도록 할 수 있었습니다.
export interface CoinPrice {
logo: string
name_kr: string
name: string
price: number
signed_change_price: number
signed_change_rate: number
acc_trade_price_24h: number
}
export interface CoinPriceObj {
[key: string]: CoinPrice
}
저도 메모 써보려다가 잘 안되서 퇴각했는데, PR이 기다려지네요
요약
hover
이벤트 걸려있던 부분 수정예상 작업 내용 (커밋단위)