서론 React 강의를 듣던 중 성능을 최적화할 수 있는 프레임워크인 MillionJS에 대해 알게 되었고, 어떠한 메커니즘으로 성능 개선이 이루어지는 지 궁금해 MillionJS 공식문서를 보고 나서 알게 된 점을 적어보려고 합니다. 우선 React의 virtual DOM 방식을 알아보고, MillionJS이 동작하는 방식이 virtual DOM과 어떠한 차이점이 있는 지 보겠습니다. 리액트의 virtual DOM 동작 방식 virtual DOM은 컴포넌트가 리렌더될 때 기존의 값과 현재의 값을 비교하고, 값이 바뀐 부분만을 찾아 리렌더하기 때문에, 모든 코드가 재평가의 대상이 되는 실제 DOM에 비해 효율적이라고 볼 수 있습니다. 개발자 도구에서 보면 값이 변경된 부분만 깜빡이며 바뀌고 있습니다. 예..

🔨 컴포넌트의 재사용 React는 component로 이루어져 있고, 데이터만 달라지면서 동일한 컴포넌트를 재사용할 수 있습니다. 아래의 커스텀 컴포넌트 에 MY_HOBBY의 데이터를 각각 다르게 props로 전달하는 코드를 보겠습니다. const MY_HOBBY = [ { title : "Movie", description : "Watch movie at theater", }, { title : "Running", description : "Run 3km", }, { title : "Football", description : "Kick a ball with our team", }, ]; 1. spread operator를 사용하여 배열의 인덱스로 props를 전달합니다. import Hobby fro..