렌더링의 속도차이가 얼마나 나는지 아시는분 계실까요??

명령어 한 개 단위 속도까지 따지면 첫번째 방법이 속도 자체는 더 빠르다고 생각됩니다. 하지만 중점적으로 생각해야할 것은 ‘속도 차이가 의미를 가지는 수준인가?‘ 인 것 같아요! 먼저 사람이 인지할 수 있는 속도인지부터 생각해봐야겠죠. 만약 사용자 경험에 있어서 유의미한 수준의 속도 차이가 발생한다면, 첫번째 방법처럼 일일이 HTML 태그를 나누려고 시도할 수 있습니다. 하지만 실제로 첫번째 방법 같이 사용하지 않는 가장 큰 이유는 코드의 가독성 및 재사용성이라고 생각해요. 결국 코드를 짜는 것은 개발자라는 “사람”입니다. 한 눈에 보기에 첫번째 코드보다는 두번째 코드가 더 보기 편하다고 생각해요. 그리고 hello라는 object의 내용이 변경되었을 경우, world라는 배열에 저장해놓은 key값이 의미가 없어질 수 있어요. 따라서 다음과 같이 코드를 작성하면 더 좋을 거라 생각합니다. const hello = {a:1, b:2, c:3}; const component = () => { return ( { Object.values(hello).map((value) => return ( <div>{value}</div> )) } ); 만약 hello라는 object에 저장되는 데이터가 3개만 있는 것이 아니라, 1억 개가 있다고 생각해볼게요. 이럴 때는 시간 복잡도가 O(N)이라 하더라도, N이 너무 커지니까 시간이 오래 걸릴 수도 있습니다. 이 때 Front-end로서 고려해야할 것은 “과연 사용자가 이만한 데이터를 한 번에 볼 수 있을까?“라고 생각합니다. TV 화면으로 보더라도 한 번에 1억개는 보기 힘들거에요. 따라서 이럴 때는 화면에 보여질 데이터의 개수를 정하고, 이에 따라 1억 개의 데이터를 조금씩 분할해서 보여줄 수 있을 겁니다. 이러한 생각으로 사용하는 것들 중에는 대표적으로 무한 스크롤뷰가 있겠네요. 정리하자면 효율적인 알고리즘을 통해 렌더링 속도를 최적화할 수 있다면 정말 좋다고 생각합니다. 하지만 그것이 코드의 가독성처럼 다른 가치를 trade-off하면서까지 해야할 필요성이 있는지 먼저 고려해보시는 것을 추천드려요!(사실 React가 속도를 지향하는 프레임워크가 아니기도 합니다.) 그리고 N의 크기를 분할하는 방식 같이, 다른 방향으로 문제를 해결하는 방법 또한 있음을 고려할 수 있다면 더할 나위 없겠네요 😊