43일차 (CS 11,12)

데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할 점은?

 큰 규모의 데이터를 무한 스크롤로 구현할 때, 브라우저의 reflow와 관련된 성능저하를 가장 중요하게 고려해야 할 점이라고 생각한다. 무한 스크롤에서는 사용자가 스크롤을 내릴 때마다 새로운 데이터를 로드하여 DOM에 추가한다. 이렇게 DOM의 요소가 계속 추가되면, 페이지의 레이아웃을 재계산하는 reflow가 빈번하게 발생되며, 이는 성능 저하의 주요 원인이 된다. 따라서 reflow와 관련된 성능저하를 가장 중요하게 고려해야 한다고 생각한다.

 

 이러한 성능 저하를 최소화하기 위한 방법을 몇 가지 말하자면,

 첫 번째는 불필요한 레이아웃 계산을 최소화하는 방법이다. DOM 요소를 추가하거나 수정하기 전에 display 속성을 none으로 설정하여 레이아웃 계산을 방지하고, 모든 변경이 완료된 후에 다시 display 속성을 원래 값으로 복원하는 방식으로 진행할 수 있다.

 

 두 번째는 한 번에 너무 많은 데이터를 로드하고 DOM에 추가하는 것을 피하는 방법이다. 이 방법은 적절한 크기의 데이터 덩어리(Chunk)를 로드하고, 이를 DOM에 점진적으로 추가하는 방식으로 진행할 수 있다.

 

 

JSX란?

 JSX는 React에서 사용되는 확장된 문법으로 JavaScript 내에서 HTML과 유사한 구문을 작성할 수 있게 해 준다. 이를 통해 더 직관적이고 가독성이 높은 코드를 작성할 수 있다. JSX를 사용하면 React 컴포넌트를 정의하고 사용할 수 있는데, 이는 재사용 가능한 UI 컴포넌트를 쉽게 만들 수 있게 해준다.

 

 이러한 JSX의 특징으로는 Babel 변환을 한다는 점이다. 브라우저는 JSX를 직접 해석할 수 없기 때문에 자바스크립트 컴파일러인 Babel을 사용하여 JavaScript로 변환하여 사용된다. 또한 JSX는 기본적으로 내용 삽입을 방지하여 XSS(크로스 사이트 스크립팅) 공격을 방지한다는 특징이 있다.