IT 전문 기술 습득을 위한 필독서 시리즈인 오라일리, 그 중에서도 꼭 챙겨봐야 할 Fluent 시리즈 중 하나로 React 고급 기술을 담은 책이다.

전문가 레벨의 내용을 담고 있기 때문에 이 책은 React로 단순하고 쉬운 애플리케이션 기능을 구현하는 예제는 별로 등장하지 않는다. 대신, 그간의 React 개발 경험을 갖고 있는 독자들이 그동안 고민하거나 궁금해했던 고급 스킬들을 담고 있다.

하나하나 구체적인 예들을 소개해 보자면 먼저 DOM의 성능을 개선하는 방법을 들 수 있겠다. 실제 DOM의 offsetWidth와 같은 속성은 상위 엘리먼트나 레이아웃에 의존적인 속성이므로 최신 상태의 정보를 담고 있는지 확인해야 하기에 리플로가 발생한다.

이에 대한 대안으로 getBoundingClientRect()와 같은 메소드를 사용해 레이아웃 I/O를 일괄처리 하는 방법이 가능하다. 즉, 레이아웃 스레싱 현상을 최소화 할 수 있다.

이를 조금 더 확장하여 재조정(reconciliation) 기법을 활용할 수 있다. 이는 가상 DOM을 구성한 후 실제 DOM을 업데이트하는 과정인데 이 중 파이버 재조정자를 예로 들어볼까 한다.

파이버 트리는 리액트 엘리먼트 대비 수명이 길어 상태를 오래 보전할 수 있다는 장점이 있다. 커밋 단계에 대한 설명을 보면 가상 DOM의 변경사항을 각각 변형 및 레이아웃 단계를 거쳐 어떻게 실제 DOM에 반영하는지 개념적으로 쉽게 이해할 수 있다.

한편 또 다른 고성능을 보장하는 이슈로 메모화, 지연 로딩, 상태 관리, 리듀서 등의 다양한 이슈를 살펴볼 수 있는데 그 중에서 비교적 쉬운 메모화를 소개해 본다.

메모화를 활용하면 컴포넌트 렌더링 최적화가 가능하므로 불필요한 컴포넌트 리렌터링을 방지할 수 있다. 대표적으로 userMemo를 사용한 방식이 있는데 이를 활용시 정렬 작업에 있어 발생하는 상당한 과부하를 해결하는데 도움이 된다.

다만, 언제나 만능 치트키가 될 수는 없는 법. 이에 대한 나쁜 사례를 다루는 데 저자가 꼼꼼하게 본인의 경험을 녹인 부분이 인상적이었다.

마지막 예시로 서버 사이드에 대한 기술로 이 책이 다루는 기술 소개를 마칠까 한다. 검색 엔진 최적화(SEO)는 이제는 웹 애플리케이션이 다뤄야 할 보편적인 기능이 된 것 같다.

문제는 검색엔진의 크롤러가 자바 스크립트의 기능을 온전히 수행하지 않는 경우가 발생하기에 이런 경우 서버 사이트 렌더링 혹은 하이드레이션과 같은 기술이 필요하다.

그 외에도 서버 사이트 기법은 사용자 경험, 보안, 성능 측면에서 더욱 필요한 데 이 책에서는 renderToString이나 renderToPipeableStream과 같은 기술들을 소개하고 있다.

리뷰에서 다 언급하지는 못했지만 Next.js와 같은 프레임워크나 userTransition 등의 동시성 문제, 서버 컴포넌트 등을 다루고 있어 리액트 기술을 한 단계 업그레이하고자하는 독자라면 반드시 읽어야 할 필독서라 생각한다.

전문가를 겨냥한 책답게 리액트를 넘어선 프런트엔드 세계의 기술도 소개한다. 수미쌍관식 구성이 인상적인데 1장에서 과거의 유물들인 jQuery, Backbone, knockout 등 과거 프레임워크와의 비교를 통해 리액트가 추구하고자 하는 방향과 장점을 파악하기 용이했다면, 10장에서는 뷰, 앵귤러, 스벨트, 솔리드, 퀵 등의 경쟁자들의 특징을 리액트와 비교해 봄으로써 관련 기술 전체를 조망하도록 구성된 점이 뛰어난 부분이다.

마지막으로 전문가를 타켓으로 하는 수준을 담은 만큼 내용이 다소 어려울 수 있다. React 중급자 수준 이상의 스킬을 가진 독자가 읽을 것을 권하고 싶으며, 리액트 스킬을 성장시키고 싶은 독자에게는 반드시 일독을 권하고 싶다.

• 책소개 - 전문가를 위한 리액트

"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."

React는 웹 개발 분야에서 혁신적인 도구로 자리잡았습니다. 2010년 Facebook의 Jordan Walke가 FaxJS라는 프로토타입을 만들면서 시작된 React는 2011년 Facebook의 뉴스피드에 처음 도입됐습니다. 그러다 2013년 오픈소스로 공개 이후 React는 지속적으로 발전하여 2022년 3월 React 18 출시, 2024년 12월 React 19 출시 등 주요 업데이트를 거치며 현재까지 개발자들에게 사랑받는 라이브러리로 성장했습니다.

​

이러한 배경 속에서 리액트 전문가인 테자스 쿠마르의 책이 출간되었습니다. 전문가를 위한 리액트 책은 React의 근본적인 개념과 내부 동작 원리를 깊이 있게 다루고 있습니다. 자세히 알아보도록 하겠습니다.

1) 리액트 필요성

React의 컴포넌트 기반 아키텍처는 재사용 가능한 UI 요소를 만들 수 있게 해줍니다. 이는 개발 효율성을 높이고 유지보수를 용이하게 만듭니다. 모듈화된 구조는 복잡한 인터페이스를 관리 가능한 단위로 나누어 개발 프로세스를 간소화합니다. 또한 React는 동적이고 반응적인 사용자 인터페이스를 만드는 데 탁월합니다.

​

이 때 가상 DOM을 활용해 효율적인 업데이트를 수행하며, 이는 사용자 경험을 향상시키고 실시간 애플리케이션 개발을 가능하게 합니다. 또한 불필요한 DOM 조작을 최소화하여 렌더링 속도를 높입니다. 즉 성능, 신뢰성, 보안 등의 웹 초창기의정적 페이지 문제에 대해 즉각적인 업데이트가 가능해 많은 기업에서 사용하고 하고 있습니다.

2) 가상 돔의 중요성

가상 DOM의 도입으로 React는 선언적 프로그래밍을 가능합니다. 개발자들은 UI의 원하는 상태를 직관적으로 정의할 수 있게 되었고, 복잡한 DOM 조작에 대한 부담에서 벗어나 애플리케이션 로직에 더 집중할 수 있게 됐습니다. 이는 코드의 가독성을 높이고 유지보수를 용이하게 만듭니다. React의 재조정 과정은 가상 DOM의 효율성을 극대화합니다.

​

이전 상태와 새로운 상태를 비교하여 최소한의 변경사항만을 실제 DOM에 적용함으로써, UI 업데이트의 성능을 획기적으로 개선했습니다. 이는 특히 복잡하고 동적인 웹 애플리케이션에서 눈에 띄는 성능 향상을 가져옵니다. 가상 DOM의 추상화 계층은 크로스 플랫폼 개발을 지원해 웹, 모바일, 데스크톱 등 다양한 환경에서 일관된 개발 경험을 제공하며, React의 활용 범위를 크게 확장시켰습니다.

책 소개

“전문가를 위한 리액트”는 단순히 리액트의 기본 사용법을 넘어 고급 패턴과 성능 최적화, 확장 가능한 아키텍처를 구축하는 방법을 다루는 책이다. 이 책은 리액트를 이미 사용해 본 개발자가 더 깊이 있는 이해와 실무적인 기술을 습득하는 데 초점을 맞추고 있다.

인상 깊었던 내용

리액트를 오래전에 다뤄봤던 터라 버전이 올라가면서 내부 동작 원리도 많이 바뀌었다는 것을 느꼈다.

파이버 데이터 구조

리액트는 16 미만 버전 ‘스택 재조정자’를 사용했었다고 한다. 작업을 일시 중지하거나 연기하지 않고 쌓여 있는대로 렌더링하기 때문에 업데이트의 우선순위를 설정할 수 없었다. 그래서 덜 중요한 업데이트가 더 중요한 업데이트를 방해하는 문제가 생겼다. 그래서 파이버라는 데이터 구조를 사용해 이 문제를 해결했다고 한다. 파이버 재조정자를 활용한 재조정 과정을 깊이있게 학습할 수 있었다.

메모화

컴포넌트에 메모화를 적용하면 내부적으로 어떤 일이 일어나는지 학습할 수 있었다.

고차 컴포넌트 패턴

고차 컴포넌트는 컴포넌트를 입력으로 받아 새로운 컴포넌트를 반환하는 함수다. 이 책에서는 고차 컴포넌트를 활용한 다양한 패턴을 소개한다. 특히 컴포넌트 합성, 고차 컴포넌트, 렌더 프롭스, 커스텀 훅 등을 활용한 다양한 패턴과 각각의 장단점이 비교되어 있어 상황에 맞는 패턴을 선택하는 데 도움이 되었다.

리액트 동시성

동시성 렌더링을 사용해 렌더링 과정에서 어떻게 우선순위를 설정하고 구성하는지 학습할 수 있었다. 처음 보는 훅도 있었는데 useDeferredValue 훅은 특정 UI 업데이트를 나중으로 미룰 수 있어서 실무에서 사용해 볼 수 있겠다는 생각이 들었다.

프레임워크

Next.js는 계속 써보고 있지만 Remix는 따로 사용해 볼 일이 없었다. Remix에 대한 글도 점점 많이 보이고 기업에서 채택하는 경우도 있었는데 뭐가 좋길래 그렇게 채택을 하는지 궁금했는데 대략적으로나마 Remix가 추구하는 방향을 알 수 있었다. Remix는 코드가 프레임워크 안에 숨겨져 있지 않고 외부로 드러나 있기 때문에 사용자가 입맛대로 수정할 수 있는게 인상적이었다. 그리고 웹의 기본적인 기능들을 적극적으로 활용하려고 한다. 폼을 사용할 때도 따로 input값을 상태값으로 저장하지 않고 native input 자체로 활용한다.

추천 대상

이 책은 다음과 같은 분들에게 추천한다:

• 리액트의 기본을 이미 알고 있고 더 깊이 이해하고 싶은 개발자
• 대규모 리액트 애플리케이션의 설계와 구현에 고민이 있는 개발자
• 성능 최적화와 코드 품질 향상에 관심이 있는 프론트엔드 개발자
• 리액트 아키텍처 패턴을 학습하고 싶은 프론트엔드 리드 개발자

마무리

“전문가를 위한 리액트”는 단순한 리액트 입문서를 넘어서, 실제 복잡한 애플리케이션 개발에 필요한 고급 기술과 패턴을 체계적으로 정리한 책이다. 요즘에 내부 구현 및 원리에 관심이 많아서 입문서 이상의 책을 찾고 있었는데 마침 좋은 기회로 이 책을 만나서 좋았고 한번에 내용들을 완전히 이해하긴 어려웠기 때문에 여러번 반복숙달하면서 내 것으로 만들어 보려고 한다. 리액트를 사용하는 개발자라면 한 번쯤 읽어볼 가치가 있는 책이라고 생각한다.

한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다.

최근 CSV나 User-Agent 관련 글을 쓰면서 기술 변화의 흐름을 알게 되면 현재의 기술을 이해하는 데에 도움이 된다는 걸 느꼈다. Windows에서 CSV의 한글이 깨지는 것은 초기 Windows의 유니코드 채택과 관련이 있었고, User-Agent가 난잡해진 것은 초기의 브라우저 경쟁과 기업의 욕망이 얽혀 있었다. 내가 처음 모던 웹 개발 환경에서 프레임워크를 접한 건 Vue 2를 통해서였는데, 당시 공식 문서에서 라이프사이클을 봐도 이해하기 어려웠다. 만약 그때 DOM이 어떻게 그려지고, 왜 가상 DOM을 사용하게 되었는지에 대한 간략한 히스토리를 알고 있었다면 더 쉽게 이해할 수 있지 않았을까 싶다. 여전히 React의 재조정(Reconciliation)과 같은 개념들은 다소 까다롭게 느껴지지만, 기술의 흐름을 알게 되면 좀 더 쉽게 이해할 수 있을 것 같다는 기대가 있었다. 이 책을 읽게 된 것도 그런 기대의 연장선에 있다.

프레임워크를 사용하다 보면 왜 React나 Vue, 혹은 다양한 빌드도구를 사용하게 되었을까 싶은 궁금증이 생긴다. 사실 웹사이트는 메모장 하나로도 만들 수 있다. 하지만 라이브러리나 프레임워크를 사용하는 데에는 다 이유가 있고, 그 이유는 보통 히스토리를 따라가다 보면 자연스럽게 보이는 경우가 많았다. 첫 번째 챕터에서는 바로 그 히스토리에 대한 이야기를 한다. React가 등장하기 이전의 세계를 설명하며 어떤 점이 불편했고, 이를 어떻게 개선하기 위해 React를 사용하게 되었는지를 다룬다. jQuery는 실제로 사용했고 최근에도 일부 레거시가 있는 프로젝트에서 사용하고 있어 익숙하지만, Backbone과 같은 라이브러리는 이름만 들어 본 정도였다. 이 챕터에서 그러한 라이브러리들의 등장 배경을 천천히 설명해 주어 이해하는 데 도움이 되었다. 최근에도 라이브러리를 적용하면서 느끼지만 기술은 필요에 의해서 나오는 것이고, 그 필요성을 이해하면 기술을 더 본질적으로 이해하는 데에 도움이 된다. 그런 면에서 첫 번째 챕터는 React를 더 잘 쓰기 위한 구체적인 무언가를 배운다기보다는 전체의 큰 흐름을 이해하는 데에 도움이 되는 챕터라고 생각한다.

다음 챕터로 JSX를 이야기한다. 프론트엔드 개발자라면 기술 면접을 준비하면서 JSX에 대해 한 번쯤 정리해 본 경험이 있을 것이고 나 역시 그런 과정을 겪었다. 막연히 처음 React를 접했을 땐 JSX를 무조건 사용해야 하는 줄 알았는데, 이후 JSX 없이 사용하는 걸 보고 좀 더 이해의 폭을 넓혔던 기억이 있다. 그 지점을 이 챕터에서 설명하고 있다. 구문 분석기가 JSX 프라그마를 확인하고 분석하는 방식과 최종적으로 변환된 JavaScript 코드에 대한 설명, 그리고 JSX 없이 사용되는 방식에 대한 설명을 이어간다.

가상 DOM에 대한 설명도 흥미롭다. document.querySelector보다 document.getElementById가 별도의 유효성 검사가 필요 없고 특정성이 높아 더 효율적인 작업이라는 설명에서 시작하는데, 막연히 ID는 고유하기 때문에 그러겠거니 하는 짐작을 넘어서 명확하게 인지하지 못하던 부분을 긁어주는 느낌이 있다. 가상 DOM을 단순히 기술적인 개념으로서의 설명이 아닌 왜 사용하게 되었는지 그 효율에 대한 이야기로 풀고 있어서 좀 더 이해하기 수월했다.

5장부터는 React 기술에 대한 구체적인 내용을 다룬다. ReactMemo, Lazy Loading, Suspense와 같은 개념부터 useState, useReducer를 활용하는 방식까지 실제 실무와 직접적으로 연결된 내용이 나온다. 기존에는 특정 패턴을 실무에 적용하면서도 어떻게 작동하는지, 왜 이걸 적용하는지, 이 상황에서 이게 최선인지 명확히 파악 못 하는 경우가 있었는데, 이 챕터를 통해 좀 더 면밀하게 과정을 이해할 수 있었다. 재차 읽는다면 이 챕터를 좀 더 집중해서 볼 생각이다.

이 책의 제목에 ‘전문가를 위한’ 혹은 ‘Fluent’라는 표현이 들어간 이유는 후반부 챕터에서 더욱 드러난다. 서버 사이드로 구현하는 React의 구성부터 동시성에 대한 이야기를 그다음 챕터로 이어 나가고 있고, 그 이후에는 다른 프레임워크를 소개하고 그에 따른 트레이드오프 등의 설명을 덧붙이면서 좀 더 폭넓은 시각을 제공한다. 개인적으로는 대체제에 대한 설명은 좀 더 간결해도 괜찮지 않았을까 하는 생각이 든다. 트레이드오프는 실제로 사용하면서 느끼는 편이 좋다고 생각하고, 독자의 목적이 React에 대한 심화적인 이해라면 특별히 메리트를 느끼지 못할 수도 있다. 물론 다른 프레임워크를 이해하는 것이 React 자체를 더 깊이 이해하는 데 도움이 되기도 하니 이러한 내용이 포함된 것도 나름의 의도가 있다고 생각한다.

책 제목이 나 같은 주니어 개발자에게는 부담스럽게 느껴질 수도 있지만, 실제로는 ‘전문가가 되고 싶은 사람을 위한 리액트’라는 제목이 어울리기도 한 책이다. 사실 React를 깊이 이해하는 것이 곧 모던 웹 생태계를 이해하는 것과 크게 다르지 않고, 웹 개발자로서 계속 성장하고 싶은 사람에게 유용한 책이라고 생각한다. 읽고서도 온전히 이해하진 못한 모던 리액트 Deep Dive는 자그마치 952쪽으로 꽤 방대한 내용을 담고 있다. 이 책은 400페이지라는 상대적으로 가벼운 분량으로 유사한 구성을 가지고 있기에 부담이 적고, 한번 정도 딥다이브를 하고 싶은데 두꺼운 책이 부담스러운 사람에게 이 책을 권하고 싶다.

React를 제대로 이해하고 싶은 개발자라면, 반드시 읽어야 할 책

이 책은 프론트엔드 개발자로 성장하고 싶은 나에게, React를 사용하며 프로젝트를 진행하는 나에게,

넓은 시야와 깊은 이해를 선물해 주었다. 

조금 더 자세히 설명해보면

1장은
웹 브라우저의 발전과 함께 Vanilla JavaScript만으로는 한계를 느끼게 된 개발 환경을 설명하며,
JavaScript 프레임워크가 등장한 배경을 이야기한다.
즉, React가 왜 필요하게 되었는지를 이해할 수 있도록 구성되어 있다.

2장부터는 React의 핵심 개념이 하나씩 소개된다.
JSX, Virtual DOM, Reconciliation, useMemo(), React.memo(), useCallback() 등의 최적화 기법이 등장하며,
React가 브라우저에서 어떻게 동작하는지 설명한다.
특히, 코드 사용법을 나열하는 대신 동작 원리를 예제와 함께 설명하여 개념을 깊이 이해할 수 있도록 돕는다.

각 장의 끝에는 <복습하기> 섹션이 있어서 해당 챕터의 핵심 내용을 질문으로 정리해준다.
이 질문들에 답을 하면서 내용을 다시 한 번 정리할 수 있다.
개인적으로 나는 이 <복습하기> 부분이 가장 유용했다.

책을 읽다 보면, 핵심 내용을 놓치는 경우가 많다.
깊이 있는 개념을 배우고 난 후 ‘내가 방금 읽은 내용이 뭐였지? 핵심이 뭘까?’라는 생각이 들곤 한다.
하지만 이 "복습하기" 덕분에 미시적인 개념을 공부하면서도,
거시적인 시각에서 큰 틀을 정리할 수 있었다.
책을 읽고 내 언어로 다시 정리하는 과정을 통해 어렴풋이 알고 있던 개념을 명확하게 정리할 수 있었다.

React가 VirtualDOM을 생성해 변경된 부분만
실제돔에 업데이트 해 동작한다는 건 기본적으로 알고 있었으나,
책을 통해 VirtualDOM은 동작하는 방식에 대해 자세히 살펴볼 수 있었다.

책에서 다룬 주요 내용을 간략히 정리해보면,
VirtualDOM은 HTML문서를 JavaScript객체로 모델링 한 것이다.
책에서는 VritualDOM이 실제DOM을 어떻게 객체 형태로 복사하는지,
두 DOM을 어떻게 비교하는지, VirtualDOM이 어떻게 효율적으로 업데이트를 하는지에 설명한다.

React가 동작하는 코드를 모두 이해할 순 없었지만
‘이런 방식으로 동작한다’라는 정도로 이해하기에는 충분했다.
그 이해를 바탕으로 React를 더 넓은 시야로 사용할 수 있게 될 것 같다는 생각도 들었다.

5장은 React의 최적화 기법에 대한 내용을 설명한다.
책을 읽으면서 내 프로젝트에 직접 적용할 법한 아이디어가 떠올라 책에 더 집중이 갔다.

6장은 SSR(서버 사이드 렌더링)에 대한 내용이다.
React는 기본적으로 CSR(클라이언트 사이드 렌더링)으로 동작하기 때문에
첫 로딩시간이 길어진다는 것과 SEO(검색엔진 최적화)에 취약하다는 단점이 있다.
이로 인해 SSR(서버 사이드 렌더링)이 주목받게 되는 과정을 설명한다. 

React로 SSR을 구현하게 될때, 처음 서버에서 받아오는 정적HTML 페이지와
JavaScript다운로드 후 동적인 페이지를 매핑시키는 개념인 hydration을 소개하면서
자연스럽게 SSR 프레임워크 Next.js 를 소개한다.

책의 막바지에 이르면
JavaScript → React → Next.js로 이어지는 발전 과정이 머릿속에 정리되는 느낌을 받는다.
어떻게 React가 나오게 되었으며, React가 어떻게 동작하고 그 한계는 무엇인지,
또 그것을 어떻게 해결하는지에 대한 윤곽을 그려볼 수 있다. 

단순히 코드를 사용해 프로그래밍 언어를 학습하는 것도 좋지만,
그 배경을 알아가며 기술의 흐름을 이해하는 것이 얼마나 중요한지 깨닫게 되었다.
이 책을 통해 React를 더 깊이 이해하고 더 넓은 시야로 바라볼 수 있게 된 시간이었다.

"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."

"사용하는 도구에 대한 책은 무조건 읽는다"라는 개인적인 고집 덕분에 이 책 리뷰도 신청하게 되었습니다. 근 5년 현업에서 리액트를 사용하고 있는데요. 사실 리액트는 만들어졌다는 소식을 접했을 때부터 책을 구해 읽었기 때문에 지금까지 읽은 리액트 책(제목에 '리액트'라는 말이 들어간 책만)이 16권쯤 됩니다.

그래서, 리액트 책들이 대충 어떤 식으로 리액트를 설명해 나가는지 알고 있습니다. 그래서 그런 내용일 거라는 막연한 기대 속에 책을 읽기 시작했습니다. 하지만 첫 장부터 다른 분위기가 느껴지기 시작하더군요.  '아하 이래서 "전문가를 위한"이라는 말을 붙여뒀구나'라는 생각을 하게 되었습니다. 

일단, MVC(모델, 뷰, 컨트롤) 패턴부터 리액트 아키텍처까지 연결해 주는 설명이 인상 깊었습니다. 사실 저는 프런트엔드 쪽을 하기 전에 임베디드 쪽 일을 꽤 했고 C++도 꽤 오래 사용했기 때문에 MFC(마이크로소프트 파운데이션 클래스)에서 그렇게 주야장천 강조하는 MVC가 상당히 익숙합니다. 하지만 프런트엔드 개발자로 일하는 주변 동료들은 용어를 들어본 정도가 대부분이더군요. 

하지만 MVC에 대한 이해가 있어야 왜 리액트가 필요했는지에 대해 좀 더 넓게 이해할 수 있다고 봅니다. ( 아마 이런 생각을 한다면 좀 고리타분한 개발자가 아닐까 싶기도 하지만) 단순히 프런트엔드 개발을 그림 그리기로 여기는 게 아니라 서비스를 구축하는 주요 아키텍트 중에 일부로 인식하는 건 꼭 필요하다고 생각하거든요. 

MVC와 MVVM에 대한 설명들은 결국 리액트 이전에 많이 사용하던 라이브러리들에 대한 설명으로 이어집니다. 왜 리액트가 각광받게 되었는지에 대해서 결과만 기억하는 것보다 과정을 전반적으로 보는 건, 앞으로 리액트가 어떻게 발전해 가게 될 것이며 혹시라도 다른 라이브러리가 리액트 보다 더 많이 사용되게 되는 경우가 발생한다면 미리 예측할 수 있는 관점을 키워줄 수 있을 겁니다. 

그리고, JSX, 가상 DOM에 대한 설명은 '재조정'과 파이버 '더블 버퍼링'으로 이어집니다. 리액트는 HTML로 브라우저 화면에 그림을 그리는 DOM이라는 객체를 가상으로 만들어서 업데이트하는 콘셉트로 만들어졌는데요. 이 과정을 좀 더 제어 가능하게 만들어준 것이 파이버입니다. 그리고 그 메커니즘이 '더블 버퍼링'이죠. 저자는 '더블 버퍼링'이 게임 쪽에서 사용해왔다고 설명하고 있는데, 사실 저도 20년 전쯤 회사에서 프로젝트를 할 때 사용했던 기억이 있습니다. 화면을 그릴 데이터가 준비되는 시간이 필요한데, 그 시간 동안 데이터를 적재하고 있는 메모리를 그대로 화면에 노출할 수 없거든요. 그래서 화면에 뿌릴 데이터를 가지고 있을 메모리 공간을 두 개 만들고 번갈아가며 데이터를 받아서 화면에 뿌릴 때는 한번 하게 했었습니다. 지금은 어떤 책에서 본 내용인지도 기억이 나지 않지만 그 당시에도 '더블 버퍼링'이라는 용어는 사용했었지요. 

그다음 저자는 서버 컴포넌트에 대한 설명으로 이어갑니다. 리액트가 서버 컴포넌트를 만들기 위해 어떤 기술을 지원하고 있고, 이게 node.js와 어떻게 연결되는지, 이를 remix와 next.js가 어떤 방향으로 구현했는지 설명하고 있습니다. 사실 remix를 설명의 대상으로 놓고 설명한 책은 제가 읽은 책으로는 이 책이 처음이라서 흥미로웠는데요. remix를 만들고 있는 사람들이 react-router라는 라이브러리도 함께 진행하고 있기 때문입니다. 그래서 react-router 7버전부터는 remix의 라우팅 개념과 거의 흡사하게 흘러가고 있습니다. 

그리고 이 말은 아직은 서버 컴포넌트를 사용할 준비가 되어 있지 않아서 쓰고 있지 못하지만 react-router만 7버전으로 업그레이드해서 그 개념을 가져다 쓴다면, 추후 remix로 갈아타는 것도 쉬울 거라는 말이 되거든요.  그래서 저는 다음 주부터 작업을 진행할 프로젝트에 react-router 7의 철학을 담아볼 생각입니다. 

이 책을 읽으면서 next.js의 서버 컴포넌트에 대해서도 동료들에게 많이 이야기를 했는데요.  아무래도 next.js로 갈아타는 건, 대부분의 코드를 다시 작업해야 할지도 모르기 때문에 고민을 많이 해야겠다고 했습니다. 

저자는 마지막으로 리액트 생태계의 미래를 볼 수 있는 혜안을 어떻게 키울 수 있을지 힌트를 제시하면서 책을 마무리합니다. 상당히 동의되는 부분이었습니다. 

십수 년 전 어느 날 저는 임베디드 용으로 만들어진 브라우저를 사용하고 있었습니다.  DOM 스펙 버전도 다소 과거 버전이었고, CSS도 3버전이 아니었기 때문에 화려한 뭔가를 만드는 건 불가능했고요. jquery를 올리는 것도 시스템이 버벅대는 바람에 순수 자바스크립트로 DOM을 조작할 수밖에 없었습니다. 그 과정에서 자바스크립트 코드에서 DOM에 어떤 요청을 하는 것이 자바스크립트 내에서 무언가를 하는 것보다 훨씬 느린 과정이라는 걸 체감했고, 자바스크립트 코드 안에서 DOM을 업데이트할 정보를 정리해서 한번에 요청하는 라이브러리가 있으면 참 좋겠다는 생각을 하게 되었습니다.  그리고 몇 년 후 리액트가 세상에 나왔다는 말을 들었습니다. 리액트는 제가 꼭 있으면 좋겠다고 생각했던 라이브러리였습니다. 비록 현업에서 바로 사용할 수 있는 상황은 아니었지만, 구할 수 있을 때마다 리액트 책을 구해서 읽었고, 현재 직장으로 이직한 원인도 리액트를 사용해 보기 위함이었습니다. 

리액트는 정말 괜찮은 아이디어를 구현한 라이브러리라는 생각은 지금도 변함없습니다. 리액트의 발전 방향도 지금까지 제가 기대해왔던 방향과 일치하고 있어서 너무 좋습니다. 저와 비슷한 경험이나 생각을 가지고 계신 분들이라면 이 책이 정말 재미있게 읽히지 않을까 싶습니다. 다른 책에서 리액트를 설명하는 걸 중점으로 두었다면 이 책은 리액트가 소프트웨어 개발 관점에서 어떤 지점에 있고 그 핵심 기술이 어떤 방향으로 흘러갈지 예측할 수 있게 해주기 때문입니다. 

한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다.

프론트엔드 라이브러리 중 하나인 리액트는 1~2년만 지나도 기술 트렌드가 급격히 변한다.(물론 리액트만은 아니지만..)

특히 최근 서버 컴포넌트, 동시성, 렌더링 최적화 등 변화가 빠른 개념들이 많아지고 있어서, 기존에 알고 있던 방식만으로는 한계를 느낄 때가 많다.

그런 의미에서 '전문가를 위한 리액트'는 최신 리액트의 흐름을 한 번에 정리하고, 앞으로 나아갈 방향까지 조망할 수 있는 책이었다.

이 책이 다루는 핵심 내용

책은 리액트의 기본적인 개념부터 시작해서 내부 동작 원리, 서버 사이드 렌더링, 최신 프레임워크 활용법까지 꽤 넓은 범위를 아우른다.

JSX, 가상 DOM 같은 기초 개념을 먼저 다지고, 이후에 재조정(Reconciliation), 동시성(Concurrency), 서버 컴포넌트(Server Components) 같은 고급 주제로 자연스럽게 이어진다.

개인적으로 가장 도움이 되었던 부분은 리액트 서버 컴포넌트에 대한 설명이었다.

기존 클라이언트 컴포넌트와의 차이점, 직렬화의 한계, 서버에서 실행되는 방식 등을 코드와 함께 설명해줘서 Next.js를 다룰 때 헷갈렸던 개념들이 명확해졌다.

예제 코드도 단순히 기능을 나열하는 것이 아니라 "왜 이런 방식이 필요한가?에 대한 서술이 있어서 이해가 쉬웠다.

또한, 리액트를 단순히 사용하는 수준이 아니라 내부 원리를 설명하는 방식이 돋보였다.

예를 들어, '리액트의 상태 업데이트 방식이 Vue나 Svelte 같은 반응형 모델과 어떻게 다른지, '메모이제이션(memoization)이 성능에 미치는 영향' 등을 비교해 주는 부분이 있어 리액트의 구조적 특성을 깊이 있게 이해할 수 있었다.

실무에서 바로 적용할 수 있는 내용

단순히 이론적인 내용뿐만 아니라, 실무에서 바로 적용할 수 있는 패턴과 최적화 기법들도 잘 정리되어 있다. 예를 들어,

useEffect를 남용하면 왜 성능이 저하되는지, Next.js의 SSR과 SSG를 언제 선택해야 하는지, 리액트에서 동시성을 어떻게 활용할 수 있는지 등 같은 실무에서 자주 고민하는 문제들에 대해 깊이 있게 다뤄준다. 특히 Next.js나 Remix 같은 프레임워크를 다루는 장에서는, 리액트 생태계의 발전 방향까지 엿볼 수 있어서 유용했다.

이 책이 적합한 독자

이 책은 리액트를 처음 배우는 입문서는 물론 아닐것이다. 이미 리액트를 사용해 본 초중급 개발자에게 적합하다.

단순히 컴포넌트를 만들고 상태를 관리하는 수준이 아니라, 리액트가 내부적으로 어떻게 동작하는지,

최신 트렌드가 왜 등장했는지를 이해하고 싶은 사람에게 추천할 만하다.

https://www.yes24.com/Product/Goods/140407282

[전자책]전문가를 위한 리액트 - 예스24

리액트의 핵심을 해부하다JSX에서 고급 최적화 기법까지, 리액트 심층 탐구서리액트는 웹 개발자에게 새로운 가능성을 열어 주는 강력한 도구이다. 이 책은 단순히 리액트 사용을 넘어, 내부 구

www.yes24.com

총평

'전문가를 위한 리액트'는 단순한 기능 설명서가 아니라, 리액트의 철학과 발전 방향까지 짚어주는 책이다.

최신 리액트 트렌드를 한눈에 정리하고 싶은 개발자, 리액트의 내부 원리를 깊이 이해하고 싶은 개발자에게 추천한다.

- 최신 리액트 19 내용을 포함해, 리액트의 작동 원리를 깊이 있게 탐구할 수 있는 책

- Next.js와 Remix 같은 최신 프레임워크까지 다뤄 큰 그림을 그리는 데 도움

- 리액트의 최적화 기법과 디자인 패턴을 실무적으로 활용할 수 있도록 구성

- 리액트를 처음 배우는 사람보다는, 초~중급 개발자가 깊이 있는 이해를 원하는 경우에 추천

리액트를 그냥 사용하는 법이 아니라, 왜 이렇게 동작하는지 원리를 알고 싶다면 이 책이 딱 맞다.

개인적으로는 한 번 읽고 끝낼 책이 아니라, 앞으로도 필요할 때마다 찾아보게 될 책이 될 것 같다.

"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."

리액트 덕후가 알려주는 리액트라고 하면 어떤 분위기 인지 짐작하실 수 있을 겁니다.
읽는 도중 종종 들었던 생각이 이렇게 까지 알아야 하나 하는 거였습니다.
그런 생각이 드는 부분에서는 저자도 어김없이 세세하게 알 것까지는 없다고 언급합니다.
다만, 원리를 알아두면 전체를 이해하는데 도움이 될 거라고 의도를 명확히 합니다.

기본을 단단히
리액트를 떠받치는 기둥인 JSX와 가상 DOM을 살펴봅니다.
'무엇을 해야 하는가' 보다는 '어떤 맥락을 가지는가'에 좀 더 무게를 두고 있습니다.
리액트를 사용하여 무엇으로 어떻게 구성해야 하는지를 알아가는데 더하여,
새로운 상황에 대응하는 새로운 시각이 가지는 힘을 보여주고자 합니다.
리액트를 향한 믿음을 엿볼 수 있습니다.

실무적인 고민들
기본을 확인한 뒤 바로 실무에서 접하는 고민들을 살핍니다.
반응성이 가장 큰 주제이다 보니 마주할 수밖에 없는 문제들입니다.
UI를 구성하는 요소들이 중첩되는 구조를 가지기 때문에, 상태가 바뀌면 아래로 아래로, 위로 위로 상황에 대응해야 합니다. 비교하고 다시 그리기를 반복해야 한다는 거죠.
가상 DOM을 사용한다고 하지만 늘어나는 부하는 어쩔 수 없습니다.
이런 상황을 헤쳐나가는데 리액트가 사용하는 방식, 나아가는 방향을 알려줍니다.

영역을 넓히다
클라이언트 라이브러리로 시작한 리액트가 인기를 얻으면서 서버 쪽으로 영역을 넓히고 있습니다.
덕분에 클라이언트이기에 가질 수밖에 없는 제약이나 부담을 서버 쪽에서 해결하면서,
보다 효율적으로 리액트 애플리케이션을 운영할 수 있습니다.
반응형에 관해서는 리액트만으로 충분함을 보여줍니다.
다만, 어떻게든 리액트로 처리하려는 걸 보며 조금 과하지 않나 하는 느낌이었습니다.
리액트에 대한 믿음을 보여주는 리액트 덕후 답다고 생각했습니다.

리액트가 클라이언트 라이브러리, 프레임워크로서 커다란 흐름을 만든 건 부정할 수 없습니다.
기왕 익히는 거, 이해가 깊어지는 만큼 좋은 애플리케이션을 만들 수 있을 거라 생각합니다.
그 길에 이 책이 괜찮은 동반자라 생각합니다.
얼마나 깊이 이해하고자 하는가는 각자의 선택에 달려있겠죠.
 

"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."

들어가며

리액트를 어느정도 사용해보니까 단순히 기능을 사용하는 데에서 그치는게 아니라 리액트가 어떻게 작동하는 지 제대로 알아야겠다는 생각이 들었습니다. 특히 최적화가 필요할 때, 무작정 useMemo, useCallback을 사용하기보단 리액트의 렌더링 과정과 성능 개선 원리를 이해하는 것이 더 중요하다는 생각이 들었습니다. 이 책은 리액트의 기본적인 사용법을 넘어서, 리액트의 철학, 렌더링 메커니즘, 최적화 방법, 실전에서의 활용법까지 폭넓게 다룹니다. 단순한 튜토리얼이 아니라 "왜 이런 방식으로 동작하는가?" 에 대한 깊이 있는 설명이 많아 리액트를 제대로 이해하고 싶은 개발자들에게 유용한 책이었습니다.

목차 및 주요 내용

목차는 다음과 같습니다.

CHAPTER 1 입문자를 위한 지식

_1.1 리액트는 왜 필요한가요?
_1.2 리액트 이전의 세계
_1.3 리액트 등장
_1.4 그래서... 리액트는 왜 필요한가요?
_1.5 돌아보기
_1.6 복습하기
_1.7 미리보기

CHAPTER 2 JSX
_2.1 자바스크립트 XML?
_2.2 JSX의 장점
_2.3 JSX의 약점
_2.4 내부 동작
_2.5 JSX 프라그마
_2.6 표현식
_2.7 돌아보기
_2.8 복습하기
_2.9 미리보기

CHAPTER 3 가상 DOM
_3.1 가상 DOM 소개
_3.2 실제 DOM
_3.3 가상 DOM 작동 방식
_3.4 돌아보기
_3.5 복습하기
_3.6 미리보기

CHAPTER 4 재조정
_4.1 재조정 이해하기
_4.2 일괄 처리
_4.3 기존 기술
_4.4 파이버 재조정자
_4.5 돌아보기
_4.6 복습하기
_4.7 미리보기

CHAPTER 5 자주 묻는 질문과 유용한 패턴
_5.1 React.memo를 사용한 메모화
_5.2 useMemo를 사용한 메모화
_5.3 지연 로딩
_5.4 useState와 useReducer
_5.5 강력한 패턴
_5.6 돌아보기
_5.7 복습하기
_5.8 미리보기

CHAPTER 6 서버 사이드 리액트
_6.1 클라이언트 사이드 렌더링 한계
_6.2 서버 렌더링의 부상
_6.3 하이드레이션
_6.4 서버 렌더링 작성
_6.5 리액트의 서버 렌더링 API
_6.6 직접 구현하지 마세요
_6.7 돌아보기
_6.8 복습하기
_6.9 미리보기

CHAPTER 7 리액트 동시성
_7.1 동기식 렌더링의 문제
_7.2 파이버 다시 보기
_7.3 업데이트 예약과 지연
_7.4 더 깊이 들어가기
_7.5 렌더 레인
_7.6 useTransition
_7.7 useDeferredValue
_7.8 동시성 렌더링 관련 문제
_7.9 돌아보기
_7.10 복습하기
_7.11 미리보기

CHAPTER 8 프레임워크
_8.1 프레임워크가 필요한 이유
_8.2 프레임워크 사용 시 장점
_8.3 프레임워크 사용 시 트레이드오프
_8.4 인기 있는 리액트 프레임워크
_8.5 프레임워크 선택
_8.6 돌아보기
_8.7 복습하기
_8.8 미리보기

CHAPTER 9 리액트 서버 컴포넌트
_9.1 장점
_9.2 서버 렌더링
_9.3 서버 컴포넌트 규칙
_9.4 서버 액션
_9.5 리액트 서버 컴포넌트의 미래
_9.6 돌아보기
_9.7 복습하기
_9.8 미리보기

CHAPTER 10 리액트 대체제
_10.1 뷰
_10.2 앵귤러
_10.3 스벨트
_10.4 솔리드
_10.5 퀵
_10.6 자주 사용하는 패턴
_10.7 반응형이 아닌 리액트
_10.8 리액트의 미래
_10.9 돌아보기
_10.10 복습하기
_10.11 미리보기

CHAPTER 11 마치며
_11.1 핵심 요약
_11.2 리액트 학습 여정
_11.3 마법 뒤에 숨겨진 원리
_11.4 심화 주제
_11.5 트렌드 따라잡기

이 책은 리액트의 기초 개념부터 심화된 내부 구조까지 폭넓게 다루고, 리액트를 단순히 사용하는 것을 넘어 그 원리를 이해하고 최적화하는 방법을 배우는 데 초점을 맞추고 있습니다.

먼저 리액트가 등장하게 된 배경, 선언형 UI 및 컴포넌트 기반 개발의 개념을 통해 기본 지식을 다지며, JSX가 단순한 마크업 언어를 넘어 JavaScript의 확장 문법임을 실제 코드 변환 과정을 통해 이해시킵니다.

리액트의 효율적인 UI 업데이트 방식을 설명하기 위해 가상 DOM의 역할과 변경된 부분만 업데이트하는 재조정 과정을 상세히 설명해줍니다. 또한, useState와 useReducer의 차이, React.memo, useMemo, useCallback을 적절하게 사용하는 방법 등 유용한 패턴과 해결책을 정리합니다.

다양한 리액트 기반 프레임워크(Next.js, Remix, Gatsby 등)의 장단점을 비교하고, 클라이언트 컴포넌트와 서버 컴포넌트의 차이, 서버 컴포넌트 도입이 개발 방식에 미치는 영향을 설명합니다. 또한, 뷰나 앵귤러와 같은 리액트 대체제와의 객관적인 비교를 통해 리액트의 강점과 약점을 평가합니다.

또한, 리액트의 서버 사이드 렌더링(SSR)과 React 18 이후 도입된 동시성 기능을 소개하며, Next.js를 활용한 SSR 및 useTransition, Suspense를 통한 비동기 렌더링 최적화 방법을 다룹니다.

추천 대상

✔️ 리액트를 써본 경험이 있고, "왜 이렇게 동작하지?"라는 궁금증이 드는 분
✔️ 기본적인 CRUD 기능 구현을 넘어서 리액트의 내부 동작 원리를 깊이 이해하고 싶은 분
✔️ 성능 최적화, 상태 관리, 대규모 애플리케이션 설계에 대해 고민하는 분

전문가를 위한 리액트는, 왜 리액트인가. 이런 근본적인 질문에서 출발하여, 리액트의 핵심 개념과 내부 동작 방식을 깊이 있게 다룹니다. 기능 설명뿐만 아니라, 리액트가 등장하기 전의 웹 개발 패러다임과 비교하며 리액트의 강점을 코드 기반으로 설명합니다. 또한 리액트의 핵심 개념들-JSX, 가상 DOM, 재조정, 고급 최적화 기법 등을 깊이 있게 설명하며, 실무에서 유용한 패턴과 자주 묻는 질문들을 정리하여 리액트 활용에 대한 실질적인 도움을 제공합니다.

✅ 리액트의 차별점 – 제이쿼리, 백본, 녹아웃 등 과거 웹 기술 분석 및 한계를 통해 리액트의 강점을 정리
✅ 리액트의 핵심개념 심층 분석 - 가상 DOM, JSX 등 핵심 개념을 원본 소스코드와 함께 분석
✅ 실무에서 유용한 패턴 – 메모이제이션, 상태관리 등 자주 사용하는 개념을 깊이 있게 학습
✅ SSR & 프레임워크 – 서버사이드 렌더링에 대한 이해와 Remix vs Next.js 비교 및 선택 기준 제시
✅ 학습을 위한 추가 자료 제공 – 공식 문서 외에도 리액트 코어팀 및 커뮤니티 정보 정리

이외에도 리액트 핵심 개념들을 깊이 있게 분석하여, 단순히 "리액트를 쓸 줄 아는 것"을 넘어, "알고 쓰는" 단계로 나아가도록 도와주는 책입니다.

챕터가 끝날 때마다 제공되는 복습 질문이 제공됩니다. 빈칸 채우기, 객관식 퀴즈 형식이 아니라 질문 형식으로 구성된 것이 인상적이었습니다. "정답을 맞추는 것"이 아니라, 해당 내용을 다시 고민하고 깊이 생각할 수 있도록 유도하는 방식입니다. 질문들을 해결하기 위해 자연스럽게 챕터를 여러 번 읽게 되고, 그 과정에서 개념이 더 확실히 자리 잡습니다. 개념을 스스로 설명할 수 있도록 유도하는 질문들을 통해 리액트의 원리를 더욱 탄탄하게 익히는 데 큰 도움이 됩니다.

"전문가를 위한 리액트"는 리액트의 핵심 개념을 깊이 있게 다루며, 리액트 개발자로서의 역량을 한층 더 높일 수 있는 유용한 정보들을 제공합니다. 리액트를 깊이 이해하고 싶은 개발자, 기존에 리액트를 사용해 본 경험은 있지만 더 깊이 파고들고 싶은 개발자에게 강력히 추천하고 싶습니다. 리액트를 사용한다를 넘어, 그 내부를 깊이 이해하고 싶은 모든 개발자분들에게 최고의 선택이 될 것 같습니다.

* 한빛미디어 서평단 <나는 리뷰어다> 활동을 위해서 책을 협찬받아 작성된 서평입니다. *

깊이 있는 개발 전문 서적 시리즈로 유명한 오라일리에서 리액트 관련 신간이 출판되었다는 소식을 듣고, 1순위로 「전문가를 위한 리액트」를 신청했다. 더구나 2024년 12월 말 초판이 나온 신간으로, 최근 빠르게 변화하고 있는 리액트 최신 기술 동향을 잘 반영하고 있을 것이라는 기대감도 있었다. 이 글이 본 책이 어떤 내용으로 구성되어 있는지 궁금한 분들께 도움이 되길 바란다.

「전문가를 위한 리액트」의 목차는 다음과 같다.

1. 입문 지식
2. JSX
3. 가상 DOM
4. 재조정
5. 자주 묻는 질문과 유용한 패턴 (hooks, state, 최적화, 패턴 등)
6. 리액트의 서버사이드
7. 리액트의 동시성
8. 프레임워크 (remix, next.js)
9. 리액트 서버 컴포넌트
10. 리액트의 대체제 (vue, angular, svelt 등)

목차를 보면 알 수 있듯이, 리액트의 기본 배경지식부터 시작해서 핵심 개념인 JSX, 가상 DOM, hooks, state, 그리고 심화 내용까지 체계적으로 다루고 있다. 책의 본문에는 예시 코드와 함께 필요한 부분에는 시각화 자료들이 함께 있어, 그 내용들을 쉽게 이해할 수 있도록 도와주었다.

이 책에서 특히나 흥미로웠던 점은 두 가지였다. 첫 번째, 리액트뿐만 아니라 리액트를 기반으로 한 next.js와 remix까지 함께 소개한다는 점이다. 넥스트에 대한 자료는 이제 쉽게 찾아볼 수 있지만, 리믹스는 국내에서 대중적으로 사용되지 않기 때문에 한국어 레퍼런스를 찾기가 상대적으로 어렵다. 그런데 이 책에서는 리믹스의 기본 구조와 간단한 사용법을 안내하여 새로운 기술을 한눈에 파악하고 실습해 볼 수 있게 해주는 점이 인상적이었다.

두 번째는, 초급이나 중급 수준을 넘어 리액트의 작동 원리를 심도 있게 탐구할 수 있도록 책이 구성되어있다는 것이다. 초반에 복습한 기본 지식을 바탕으로 중급 및 고급 내용까지 자연스럽게 연결되어, 리액트를 단순히 사용하는 방법을 넘어 내부 동작 원리까지 꼼꼼히 이해할 수 있도록 돕는다.

더불어 이 책은 개발 현장에서 자주 사용하게 되는 코드 최적화, 그리고 다양한 디자인 패턴들을 구체적인 예제와 함께 제시해 실무에도 적용해 볼 수 있도록 구성되어 있다. 또한 신간인 만큼 가장 최신의 내용을 반영하고 있어 이 내용이 최신 내용이 맞는지 비교 검증하며 읽지 않아도 되어서 좋았다. 이와 같은 이유들로 「전문가를 위한 리액트」 는 기대한 만큼이나 만족스러웠다. 리액트를 처음 배우거나 프로젝트를 진행해보지 않은 초보자보다는 초~중급 개발자에게 더 유용할 것 같고, 특히나 리액트의 내부 동작원리와 구조를 체계적으로 이해하고자 하는 분께 추천할만하다.



“한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다.”

저는 프로그래밍 언어가 아닌, 프레임워크나 라이브러리에 대한 책은

그다지 선호하지 않습니다.

왜냐하면 변화가 더딘 프로그래밍 언어와는 달리

라이브러리나 프레임워크는 버전업도 빠르고

트렌드의 변화도 빠르기 때문에

도서를 구매하고, 채 다 읽기도 전에

책의 내용이 쓸모없어지는 경우도 발생하기 때문입니다.

하지만 웹개발자로써 "전문가를 위한 리액트"라는 제목은

호기심을 불러일으키기에 딱 좋은 문장이었습니다.

교보문고의 IT 기술 서적 코너에서 리액트 관련 도서를 뒤적거리다보면

리액트 공식문서에서 충분히 학습할 수 있는 내용들로 채워져 있는 경우가 많았기 때문에

"전문가를 위한 리액트"라는 제목에 대한 궁금증이 컸습니다.

책의 첫번째 챕터를 읽었을때 들었던 느낌은

"상당히 신선하다." 였습니다.

혹시 "모던 자바스크립트 딥다이브" 라는 책을 아시나요?

자바스크립트를 공부하는 개발자들에게

거의 바이블처럼 회자되는 책입니다.

프론트엔드 개발자라면 보통 스터디를 하던 자습을 하던

꼭 한 번은 거쳐가는 책인데

처음 그 책을 펼치고

변수 호이스팅에 대한 내용을 접했을때 느꼈던 바로 그 신선함을

이 책에서도 느낄 수 있었습니다.

보통 기술 서적을 읽으면

문체가 유려하다는 느낌보다는

정보를 잘 전달하는구나 라는 느낌을 받기 쉽습니다.

하지만 이 책의 저자는

딱딱하고 기계적인 문체보다는

조금은 가벼운, 마치 대화하는 듯한 문체를 사용해

공부를 위한 책이라기 보다는

리액트에 대한 역사서를 읽는듯한 느낌을 주었습니다.

물론 "전문가를 위한"이라는 수식어에 걸맞게

코드를 분석하고 전문적인 내용을 설명할때에는

머리아픈 부분들도 많았습니다.

하지만 바로 그렇기 때문에

이 책에 대한 만족도가 높았습니다.

라이브러리에 대한 책이라는 점에서

빠르게 변하는 프론트엔드 트렌드를

머지않아 놓치게 될 수 있다는 단점에서 자유로울 수는 없겠지만

전문가의 관점에서 바라보는 리액트를

부담스럽지 않으면서도

진지하게 엿볼 수 있는 기회였다고 생각합니다.



<<전문가를 위한 리액트>> 를 읽으면서 가장 인상 깊었던 점은 리액트의 내부 작동 방식에 대한 친절하고 상세한 설명이었습니다. 마치 숙련된 장인이 연장을 다루듯, 리액트의 숨겨진 구석구석을 탐험하며 그 원리를 파헤치는 듯한 느낌을 받았습니다.

개인적으로  <<러닝 리액트>> 가 리액트의 기본 개념과 사용법을 친절하게 안내하는 입문서라면, 이 책은 더 깊이 있는 지식과 실전 경험을 원하는 개발자를 위한 전문적인 가이드라고 생각합니다. 두 책을 함께 읽으면 리액트에 대한 이해를 더욱 넓힐 수 있을 것 같습니다.

이 책은 리액트 내부 작동 방식에 대한 심층적인 분석에 집중한 탓에, 실제 프로젝트에 적용할 수 있는 구체적인 예제나 팁이 부족하다는 느낌을 받았습니다. 물론 리액트 핵심 원리를 이해하는 데는 충분하지만, 실전 경험을 쌓기 위해서는 별도의 학습이 필요할 것 같습니다.

이 책은 리액트 핵심 개념에 대한 깊이 있는 이해를 원하는 개발자에게 추천하는 책입니다. 이 책을 통해 리액트 작동 방식에 대한 탄탄한 기반을 다진다면, 실제 프로젝트에서도 능숙하게 리액트를 활용할 수 있을 것입니다.

이 책은 리액트의 근간이 되는 메커니즘과 고급 사용 패턴, 모범 사례를 배우고자 하는 분들을 위해 아주 상세하게 리액트를 설명합니다. 따라서 단순한 사용법을 넘어 리액트가 어떻게 동작하는지 알고 싶은 분들에게 적합합니다. 많은 리액트 서적이 최종 사용자로서 리액트를 사용하는 방법에 치중합니다. 그에 반해 이 책은 최종 사용자가 아닌 라이브러리나 프레임워크 개발자 수준으로 리액트를 이해하도록 돕습니다.

"진짜"들만 모여라 - 리액트 역사부터 프레임워크 내부 원리까지

늘 그래왔던 것처럼 책을 한 두 번 훑어보면서 느꼈다. 이 책은 진짜다! 책의 내용과 구성이 좋아서, 초급부터 고급 개념까지 차근차근 이해하며 읽을 수 있었다. 물론 React 참고서와 교육 문서도 정말 잘 만든 컨텐츠라 생각한다. 차이점은 React 컨텐츠는 최종 사용자로서 실제 개발에 유용한 느낌이고, 정보들이 링크를 통해 파편화되어 있어서 구조적으로 정돈된 느낌은 덜하다. 하지만 이 책은 전개 과정 중에 끊임없이 문제를 제기하고 해결해가며 자연스럽게 개념을 빌드업하고, 놓치는 내용이 없도록 질문을 통해 recap도 한다. 내용이 다소 무겁게 느껴질지라도 이러한 친절한 구성 덕에, 리액트를 보다 더 효율적으로 사용하고 싶어하는 초중급 개발자들에게 큰 도움이 될 것이라 생각한다.

첫 번째 장 [입문자를 위한 지식]에서는 리액트가 왜 존재하게 되었는지, 어떻게 동작하는지, 어떤 문제를 해결하려고 작성되었는지, 그리고 지금의 리액트 이전에는 다른 어떤 방식이 존재했는지, 역사적인 맥락과 해결하고자 했던 기술적 문제를 이해하는 시간을 갖는다. 이 장이 중요한 이유는 리액트를 하나의 문제 해결 도구의 관점으로서, 책을 보다 풍부한 관점에서 읽을 수 있도록 도와주기 때문이다. 저자는 역사 다큐멘터리 영상도 추천했는데, 이 80분 분량의 영상도 정말 의미있는 내용이 많으니 시청해보는 것을 추천한다.  

O 하나부터 열까지, 차근차근 쌓아올리는 리액트 개념

이 책은 2장부터 7장까지의 리액트 개념과 10장까지의 프레임워크 내용을 차례대로 소개한다. 이전 장에 대한 이해를 전제로 다음 장을 전개하는 구성이므로, 각 장마다 제공하는 복습 질문에 나름 타당한 답을 낼 수 있을 때까지 반복하여 읽다보면 리액트에 대한 지식을 자연스레 쌓아나갈 수 있다는 것이 장점이다.

X 다양한 API 활용은 리액트 학습 문서를 참고하자

리액트에는 다양한 훅과 API가 존재한다. 하지만 모든 내용을 다룰 수는 없어, 핵심적인 부분만 다룬다. 따라서, 리액트에 대한 이해보다 리액트의 활용에 관심이 있다면, 앞서 언급한 학습 문서나 개발 문서가 더 큰 도움이 될 것이다. 추가적으로 최근 업데이트된 React 19의 변경 및 개선 사항에 대해서도 다루지 않는다. 

마치며...

요즘 대부분의 웹 프론트는 프레임워크는 달라도, 대부분 React를 기반으로 개발된다. 따라서, 프론트엔드 개발자를 희망한다면 이 책을 읽어볼 것을 강력히 추천한다! 실습 소스를 찾아 링크를 첨부하려 했는데 아쉽게도 찾지 못했다. 그래서 혹시라도 본 책의 내용을 직접 실습해보고 싶은 이들을 위해 전문가를 위한 리액트 - 계획을 시작으로 GitHub 레포에서의 실습을 진행 중에 있다. 참고하시길!​