React: 효율적인 목록 렌더링

Facebook에서 만든 React JS는 오늘날 사용자 인터페이스 구축을 위한 가장 인기 있는 JavaScript 라이브러리입니다. React를 사용하여 세련되고 빠른 단일 페이지 애플리케이션 또는 웹사이트를 구축할 수 있습니다. 이 기사에서는 React에서 목록을 효율적으로 렌더링하는 핵심에 대해 이야기하고 목록을 올바르게 렌더링하는 것이 React가 초고속 성능을 유지하는 데 도움이 되는 주요 요소임을 보여줍니다.

DOM 업데이트는 일반적으로 웹 성능, 특히 많은 CSS 효과 및 애니메이션을 사용할 때 주요 병목 현상 중 하나입니다. 페이지에 렌더링해야 하는 데이터의 양이 많은 경우 렌더링해야 하는 모든 항목을 따라잡는 데 성능이 크게 저하될 수 있습니다. 일반적으로 페이지의 무언가가 편집되면 전체 페이지가 업데이트되어 이동하거나 변경되지 않은 항목을 렌더링합니다. React의 주요 초점 중 하나는 이 문제를 해결하는 것이었고 모든 것은 React Virtual DOM에서 시작됩니다. 메모리에 보관된 DOM. React는 기본적으로 모든 것을 가상 DOM에 렌더링하고 이를 실제 DOM과 비교한 다음 변경된 항목만 렌더링하여 실제 DOM을 업데이트합니다.

가상 DOM으로 렌더링하는 것은 매우 쉽습니다. 두 개의 매개 변수를 사용하는 ReactDOM 개체에서 렌더링 메서드를 호출하여 시작합니다. 함수를 제공하는 첫 번째 인수는 페이지에 렌더링하려는 요소이고 두 번째 인수는 렌더링하려는 요소입니다.

const name = 'Ryan Moragas';

const nameElement = <h1>Hello, {name}</h1>;

ReactDOM.render(nameElement, document.getElementById('title');

위에서 React JS로 작성하기 위한 기본 구문을 볼 수 있습니다. 매우 배우기 쉬운 자바스크립트/HTML 하이브리드의 일종으로 생각할 수 있는 JSX를 사용할 수 있습니다. 자바스크립트 코드에서 직접 HTML 레이아웃을 생성할 수 있으며 자바스크립트에서 평가해야 하는 모든 항목은 중괄호 안에 들어갑니다. 아주 간단하죠? 반응에서 목록을 동적으로 렌더링하는 것도 매우 간단합니다.

const SimpleList = () => (
  <ul>
    {[3, 2, 1].map(num => <li key={index}>{num}</li>;)}
  </ul>
);

위의 스니펫에서 목록을 렌더링하는 데 사용할 배열을 만들었습니다. 정렬되지 않은 목록 태그로 목록을 래핑한 다음 중괄호로 묶은 다음 네이티브 맵 메서드를 사용하여 목록을 반복하고 각 값에 대한 JSX 요소를 만듭니다. 이 예에서 각 목록 항목에 숫자 자체의 키를 부여하고 있음을 알 수 있으며 이는 React에서 목록을 렌더링할 때 매우 중요합니다. 프레임워크는 각 요소에 지정된 키 값을 사용하여 항목을 다시 렌더링해야 하는지 여부를 결정합니다.

위에서 작성한 목록을 렌더링하는 코드를 작성하고 버튼을 클릭할 때마다 동적으로 숫자를 추가하는 클릭 버튼을 추가한다고 상상해 봅시다. 이 예제를 위해 작성된 코드에 항목의 인덱스로 설정된 각 항목의 키가 있다고 가정합니다.



위의 예에서 클릭 버튼은 배열에 추가되고 값은 페이지에 동적으로 렌더링됩니다. 이것의 문제는 항목이 배열에 추가될 때마다 인덱스가 변경되고 반응이 새 숫자가 추가될 때마다 페이지에 모든 것을 렌더링한다는 것입니다. 위는 렌더링되는 항목에 키를 할당할 때 하지 말아야 할 일의 예입니다. 페이지의 다른 항목에는 없는 고유한 ID 키를 항상 사용해야 합니다. 이렇게 하면 애플리케이션에서 낭비되는 렌더링을 제거하고 React가 목록 항목을 최대한 효율적으로 렌더링할 수 있습니다.



위의 리팩터링된 코드에서 키를 숫자 자체로 설정하여 원래 생성된 후에는 키가 변경되지 않도록 합니다. 이렇게 하면 렌더링 문제가 해결되었으며 이제 앱에 렌더링되는 유일한 항목은 새로 추가된 항목입니다. 결론적으로 모든 자바스크립트를 중괄호 안에 작성하고, 기본 자바스크립트 메서드를 사용하여 항목을 동적으로 렌더링하고 시간을 절약하고, 렌더링되는 항목에 대해 항상 고유한 키를 사용하기를 원합니다.