라쿤의 끄적끄적

Rodrigo Pombo의 Build your own React 블로그 글을 참고해서 리액트의 기본 개념, 기능들을 직접 따라 만들어 보면서, 신경쓰지 못한 부분을 알고 가고자 한다. 알아가는 과정 속에서 원글을 응용하여 직접 돌려보며 확인해볼 수 있는 실습환경을 구성 및 번역 내용이 들어간 프로젝트를 만들었다. learn-react-by-building-ko이전 글에서는 기본적인 구조화된 객체를 실제 DOM으로 만들어 보며, 리액트가 JSX와 DOM 요소를 어떻게 구성하는지 복습하며 알아봤었습니다.오늘은 리액트의 createElement, render 함수를 만들어 보며 원리와 동작을 이해해보고 성능 최적화를 위한 Concurrent Mode에 대해서 알아보는 시간을 가져보려 합니다.똑같이 원글을 따라..

지난 글에서 프론트엔드 생태계의 거대한 흐름을 회고해 보았다면, 이번에는 그 중심에 있었던 리액트(React)를 다시금 톺아보고자 한다. Vue나 Angular 같은 쟁쟁한 경쟁자들 사이에서 리액트가 독보적인 선택을 받았던 이유는 무엇일까?DOM과 상태의 동기화: 새로운 패러다임의 제시과거 바닐라 자바스크립트나 jQuery 중심의 개발 환경에서는 상태가 변할 때마다 해당 상태와 연결된 DOM을 수동으로 동기화해야 했다. 명령형 프로그래밍 방식은 서비스가 커질수록 로직이 어디서 어떻게 실행되는지 추적하기 어렵게 만들었다.리액트는 여기서 "매 렌더링마다 UI 전체를 다시 그리자"라는 파격적인 방향을 제시했다. 내부적으로 Virtual DOM을 활용해 실제 변경된 부분만 효율적으로 반영하는 구조를 갖췄고, 특..