지금까지 컴포넌트 함수와
상태, 가상 DOM 그리고 다른 중요한 것들에 대해 배웠습니다
이제 여러분은 아주 자세하게
리액트가 어떻게 작동하는지
그리고 리액트를 어떻게 개선할지 배우셨습니다
이 섹션을 마무리하기 위해서 제가 알려드리고 싶은 게 있는데
바로 또다른 패키지입니다
리액트 앱의 성능을 최적화하는데 사용하는
이건 바로 Miillion.js 패키지입니다
조금 독특한 이름입니다만
이 패키지는 정말 흥미롭습니다
Million.js를 검색하면
공식 홈페이지에서
이 패키지에 대해 더 알아볼 수 있는데
가장 중요한 건 이게
리액트를 더 빠르게 할 수 있다는 것입니다
공식에서는 현재 70%라고 홍보하고 있는데
지금 녹화하는 시점 기준입니다
이 패키지는 무료로 제공됩니다
미리 알려드리는 내용입니다
자, 이 패키지에 대해 더 자세히 배워보려면
공식 문서들을 살펴봄으로 알 수 있고
그 안에서 설정 옵션을 설명하고 있습니다
성능을 최대로 끌어올리기 위한 모든 게 있습니다
하지만 역시 자동 모드로 시작해볼 수 있습니다
이 모드를 사용할 때 프로젝트에 추가해
성능을 개선시키는 것은
굉장히 간단합니다
그냥 여러분의 프로젝트에 설치하기만 하면 됩니다
그러니 일단 개발 서버를 종료하고
코드샌드박스에서 npm install million을 실행해 보겠습니다
즉 의존성에 추가하는 겁니다
그런 다음, 이건 비트(Vite) 기반의 프로젝트이기 때문에
vite.config 파일을 찾아서 수정해 줍니다
공식 문서들이 정보를 제공해주긴 합니다
여러 인기 있는 툴들을 사용해
리액트 프로젝트를 만들 때
Million.js를 여러 프로젝트에 통합시키는 방법을 설명해 줍니다
여기에서는 비트를 사용하지만
주로 Create 리액트 앱을 대체해서 사용하기도 합니다
비트를 사용할 땐 간단하게
이 코드를 복사해서 이 코드에 바꿔넣습니다
이 vite.config 파일입니다
그게 끝입니다
그걸로 Million.js가 활성화되었지만
아직 라이브러리에 가능한 모든 개선사항들을
사용할 수 있는 건 아닙니다
몇 개의 개선만 가능합니다
그럼 개발 서버를 새로고침하겠습니다
특히 앱을
배포 목적으로 만들었다면
그것 또한 이 부분에서 다루겠지만
아무튼 그러려면 더 좋은 성능을 가져야 합니다
적어도 지금은 에러가 났지만
고칠 수 있습니다
이 icon 컴포넌트로 가서 무시하면 됩니다
이 공식 Million.js 웹사이트에 써있는
지시대로 한 겁니다
무시하라는 주석을 여기
컴포넌트 함수 앞에 달아줍니다
그리고 이 컴포넌트에서는
제외시키겠습니다
그러고 나서 새로고침을 하면 앱이 재-랜더링됩니다
보시다시피 이전과 똑같이 동작하고 작동합니다
콘솔에 에러 없이 잘 돌아가고
그리고 사실 이제 속도가 빨라져야 합니다
물론 이 데모 앱에서는 상관 없는 일이긴 합니다
속도 차이를 측정하기 힘든 이유는
이미 간단하고 빠른 앱이기 때문입니다
하지만 더 복잡한 프로젝트를 작업 중이고
그 안에 출력하고 업데이트되는
상호적 데이터가 많을 경우
Million.js가 그 앱의 속도를 올려줄 수 있을지도 모릅니다
그러니 이 공식 문서들은 꼼꼼히 살펴보고
자세히 어떻게 설정하고
사용하는지 배워보시길 권장합니다
성능을 최대치까지 끌어올릴 수 있을지도 모릅니다
왜냐면 결국 Million.js는
리액트의 가상 DOM 매커니즘을 대체하여
더 효율적인 매커니즘으로
더 빠르고 DOM 업데이트도 빠르게 수행하기 떄문에
리액트의 기존 알고리즘보다 더 효율적이고 빠릅니다
그게 제가 여러분들께 Million.js를
이 섹션의 한 부분으로서 알려드리고 싶었던 이유입니다
이 프로젝트에서는 그닥 필요가 없지만서도
추후 프로젝트들에서는 충분히
도움을 받을 수 있을 것입니다