전문가 레벨의 내용을 담고 있기 때문에 이 책은 React로 단순하고 쉬운 애플리케이션 기능을 구현하는 예제는 별로 등장하지 않는다. 대신, 그간의 React 개발 경험을 갖고 있는 독자들이 그동안 고민하거나 궁금해했던 하나하나 구체적인 예들을 소개해 보자면 먼저 이에 대한 대안으로 이를 조금 더 확장하여 파이버 트리는 리액트 엘리먼트 대비 수명이 길어 상태를 오래 보전할 수 있다는 장점이 있다. 한편 또 다른 고성능을 보장하는 이슈로 메모화, 지연 로딩, 상태 관리, 리듀서 등의 다양한 이슈를 살펴볼 수 있는데 그 중에서 비교적 쉬운 메모화를 활용하면 컴포넌트 렌더링 최적화가 가능하므로 불필요한 컴포넌트 리렌터링을 방지할 수 있다. 대표적으로 다만, 언제나 만능 치트키가 될 수는 없는 법. 이에 대한 마지막 예시로 서버 사이드에 대한 기술로 이 책이 다루는 기술 소개를 마칠까 한다. 검색 엔진 최적화(SEO)는 이제는 웹 애플리케이션이 다뤄야 할 보편적인 기능이 된 것 같다. 문제는 검색엔진의 크롤러가 자바 스크립트의 기능을 온전히 수행하지 않는 경우가 발생하기에 이런 경우 그 외에도 서버 사이트 기법은 사용자 경험, 보안, 성능 측면에서 더욱 필요한 데 이 책에서는 리뷰에서 다 언급하지는 못했지만 전문가를 겨냥한 책답게 리액트를 넘어선 프런트엔드 세계의 기술도 소개한다. 마지막으로 전문가를 타켓으로 하는 수준을 담은 만큼 내용이 다소 어려울 수 있다. 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의 활용 범위를 크게 확장시켰습니다. |
한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다. 최근 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페이지라는 상대적으로 가벼운 분량으로 유사한 구성을 가지고 있기에 부담이 적고, 한번 정도 딥다이브를 하고 싶은데 두꺼운 책이 부담스러운 사람에게 이 책을 권하고 싶다. |
|
"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다." 전문가를 위한 리액트
"사용하는 도구에 대한 책은 무조건 읽는다"라는 개인적인 고집 덕분에 이 책 리뷰도 신청하게 되었습니다. 근 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 같은 프레임워크를 다루는 장에서는, 리액트 생태계의 발전 방향까지 엿볼 수 있어서 유용했다. 이 책이 적합한 독자 이 책은 리액트를 처음 배우는 입문서는 물론 아닐것이다. 이미 리액트를 사용해 본 초중급 개발자에게 적합하다. 단순히 컴포넌트를 만들고 상태를 관리하는 수준이 아니라, 리액트가 내부적으로 어떻게 동작하는지, 최신 트렌드가 왜 등장했는지를 이해하고 싶은 사람에게 추천할 만하다. 총평 '전문가를 위한 리액트'는 단순한 기능 설명서가 아니라, 리액트의 철학과 발전 방향까지 짚어주는 책이다. 최신 리액트 트렌드를 한눈에 정리하고 싶은 개발자, 리액트의 내부 원리를 깊이 이해하고 싶은 개발자에게 추천한다. - 최신 리액트 19 내용을 포함해, 리액트의 작동 원리를 깊이 있게 탐구할 수 있는 책 - Next.js와 Remix 같은 최신 프레임워크까지 다뤄 큰 그림을 그리는 데 도움 - 리액트의 최적화 기법과 디자인 패턴을 실무적으로 활용할 수 있도록 구성 - 리액트를 처음 배우는 사람보다는, 초~중급 개발자가 깊이 있는 이해를 원하는 경우에 추천 리액트를 그냥 사용하는 법이 아니라, 왜 이렇게 동작하는지 원리를 알고 싶다면 이 책이 딱 맞다. 개인적으로는 한 번 읽고 끝낼 책이 아니라, 앞으로도 필요할 때마다 찾아보게 될 책이 될 것 같다. |
"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다."![]() 리액트 덕후가 알려주는 리액트라고 하면 어떤 분위기 인지 짐작하실 수 있을 겁니다. 읽는 도중 종종 들었던 생각이 이렇게 까지 알아야 하나 하는 거였습니다. 그런 생각이 드는 부분에서는 저자도 어김없이 세세하게 알 것까지는 없다고 언급합니다. 다만, 원리를 알아두면 전체를 이해하는데 도움이 될 거라고 의도를 명확히 합니다. 기본을 단단히리액트를 떠받치는 기둥인 JSX와 가상 DOM을 살펴봅니다.'무엇을 해야 하는가' 보다는 '어떤 맥락을 가지는가'에 좀 더 무게를 두고 있습니다. 리액트를 사용하여 무엇으로 어떻게 구성해야 하는지를 알아가는데 더하여, 새로운 상황에 대응하는 새로운 시각이 가지는 힘을 보여주고자 합니다. 리액트를 향한 믿음을 엿볼 수 있습니다. 실무적인 고민들기본을 확인한 뒤 바로 실무에서 접하는 고민들을 살핍니다.반응성이 가장 큰 주제이다 보니 마주할 수밖에 없는 문제들입니다. UI를 구성하는 요소들이 중첩되는 구조를 가지기 때문에, 상태가 바뀌면 아래로 아래로, 위로 위로 상황에 대응해야 합니다. 비교하고 다시 그리기를 반복해야 한다는 거죠. 가상 DOM을 사용한다고 하지만 늘어나는 부하는 어쩔 수 없습니다. 이런 상황을 헤쳐나가는데 리액트가 사용하는 방식, 나아가는 방향을 알려줍니다. 영역을 넓히다클라이언트 라이브러리로 시작한 리액트가 인기를 얻으면서 서버 쪽으로 영역을 넓히고 있습니다.덕분에 클라이언트이기에 가질 수밖에 없는 제약이나 부담을 서버 쪽에서 해결하면서, 보다 효율적으로 리액트 애플리케이션을 운영할 수 있습니다. 반응형에 관해서는 리액트만으로 충분함을 보여줍니다. 다만, 어떻게든 리액트로 처리하려는 걸 보며 조금 과하지 않나 하는 느낌이었습니다. 리액트에 대한 믿음을 보여주는 리액트 덕후 답다고 생각했습니다. 리액트가 클라이언트 라이브러리, 프레임워크로서 커다란 흐름을 만든 건 부정할 수 없습니다. 기왕 익히는 거, 이해가 깊어지는 만큼 좋은 애플리케이션을 만들 수 있을 거라 생각합니다. 그 길에 이 책이 괜찮은 동반자라 생각합니다. 얼마나 깊이 이해하고자 하는가는 각자의 선택에 달려있겠죠. |
|
한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다. 책의 특징 책의 소제목들을 상세히 보면 쉽게 보실 수 있는데, 본 책은 챕터에 대한 기술들을 소개하면서 기존에 있던 문제의 한계가 무엇이었고, 어떤 기술이 부상하게 되었으며, 그로 인한 기술의 장단점을 알려주는 방식으로 서술되어 있습니다.
그만큼 책을 읽으면서 100% 주입식 학습이 아닌, 독자와 저자가 서로 소통하는 듯한 느낌을 받았습니다. ![]() 돌아보기 & 복습하기 책에서는 각 챕터가 끝날 때마다 돌아보기와 복습하기 섹션을 통해, 해당 챕터에서 읽은 것에 대해 잘 알고 있는지, 추가적으로 어떤 것을 공부하면 좋을지 등을 질문으로 제공해주고 있습니다. ![]()
책의 질문을 기반으로 ChatGPT에게 물어본 결과![]() 자연스럽게 추가로 떠오른 질문에 대해 ChatGPT에게 질문한 결과<마치며> 섹션 ![]()
총평
하나의 기술을 공부할 때 구체적인 원리와 발전 과정을 함께 공부해보고 싶으신 분들에게 이 책을 추천합니다. |
|
"한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다." 들어가며리액트를 어느정도 사용해보니까 단순히 기능을 사용하는 데에서 그치는게 아니라 리액트가 어떻게 작동하는 지 제대로 알아야겠다는 생각이 들었습니다. 특히 최적화가 필요할 때, 무작정 useMemo, useCallback을 사용하기보단 리액트의 렌더링 과정과 성능 개선 원리를 이해하는 것이 더 중요하다는 생각이 들었습니다. 이 책은 리액트의 기본적인 사용법을 넘어서, 리액트의 철학, 렌더링 메커니즘, 최적화 방법, 실전에서의 활용법까지 폭넓게 다룹니다. 단순한 튜토리얼이 아니라 "왜 이런 방식으로 동작하는가?" 에 대한 깊이 있는 설명이 많아 리액트를 제대로 이해하고 싶은 개발자들에게 유용한 책이었습니다. ![]() 목차 및 주요 내용![]() ![]() ![]() ![]() 목차는 다음과 같습니다. CHAPTER 1 입문자를 위한 지식 _1.1 리액트는 왜 필요한가요? 이 책은 리액트의 기초 개념부터 심화된 내부 구조까지 폭넓게 다루고, 리액트를 단순히 사용하는 것을 넘어 그 원리를 이해하고 최적화하는 방법을 배우는 데 초점을 맞추고 있습니다. 먼저 리액트가 등장하게 된 배경, 선언형 UI 및 컴포넌트 기반 개발의 개념을 통해 기본 지식을 다지며, JSX가 단순한 마크업 언어를 넘어 JavaScript의 확장 문법임을 실제 코드 변환 과정을 통해 이해시킵니다. 리액트의 효율적인 UI 업데이트 방식을 설명하기 위해 가상 DOM의 역할과 변경된 부분만 업데이트하는 재조정 과정을 상세히 설명해줍니다. 또한, useState와 useReducer의 차이, React.memo, useMemo, useCallback을 적절하게 사용하는 방법 등 유용한 패턴과 해결책을 정리합니다. ![]() 다양한 리액트 기반 프레임워크(Next.js, Remix, Gatsby 등)의 장단점을 비교하고, 클라이언트 컴포넌트와 서버 컴포넌트의 차이, 서버 컴포넌트 도입이 개발 방식에 미치는 영향을 설명합니다. 또한, 뷰나 앵귤러와 같은 리액트 대체제와의 객관적인 비교를 통해 리액트의 강점과 약점을 평가합니다. 또한, 리액트의 서버 사이드 렌더링(SSR)과 React 18 이후 도입된 동시성 기능을 소개하며, Next.js를 활용한 SSR 및 useTransition, Suspense를 통한 비동기 렌더링 최적화 방법을 다룹니다. ![]() 추천 대상✔️ 리액트를 써본 경험이 있고, "왜 이렇게 동작하지?"라는 궁금증이 드는 분 🚨 아예 리액트를 처음 접하는 분들에게는 다소 어려울 수 있습니다. 이 책은 단순히 리액트를 사용하는 수준에서 벗어나 리액트가 내부적으로 어떻게 동작하는지 깊이 이해하고 싶은 분들께 추천합니다. 리액트를 아예 처음 공부하시는 분께는 내용이 어렵게 느껴질 수도 있습니다. 어느 정도 리액트를 다뤄본 후 리액트의 원리를 깊이 파악하고 싶은 분들껜 큰 도움이 될 것 같습니다. 마무리하며이 책을 읽으며 리액트가 단순한 UI 라이브러리가 아니라, 컴포넌트 기반의 선언형 UI를 효율적으로 관리하는 강력한 도구라는 점을 다시 한번 깨달았습니다. 단순한 기능 사용을 넘어 리액트의 원리를 이해하고, 최적화 기법을 익히고 싶은 개발자라면 꼭 읽어볼 가치가 있는 책이라고 생각합니다. |
한빛미디어 서평단 <나는 리뷰어다> 활동을 위해 책을 협찬 받아 작성된 서평입니다 전문가를 위한 리액트는, 왜 리액트인가. 이런 근본적인 질문에서 출발하여, 리액트의 핵심 개념과 내부 동작 방식을 깊이 있게 다룹니다. 기능 설명뿐만 아니라, 리액트가 등장하기 전의 웹 개발 패러다임과 비교하며 리액트의 강점을 코드 기반으로 설명합니다. 또한 리액트의 핵심 개념들-JSX, 가상 DOM, 재조정, 고급 최적화 기법 등을 깊이 있게 설명하며, 실무에서 유용한 패턴과 자주 묻는 질문들을 정리하여 리액트 활용에 대한 실질적인 도움을 제공합니다. ✅ 리액트의 차별점 – 제이쿼리, 백본, 녹아웃 등 과거 웹 기술 분석 및 한계를 통해 리액트의 강점을 정리 ✅ 리액트의 핵심개념 심층 분석 - 가상 DOM, JSX 등 핵심 개념을 원본 소스코드와 함께 분석 ✅ 실무에서 유용한 패턴 – 메모이제이션, 상태관리 등 자주 사용하는 개념을 깊이 있게 학습 ✅ SSR & 프레임워크 – 서버사이드 렌더링에 대한 이해와 Remix vs Next.js 비교 및 선택 기준 제시 ✅ 학습을 위한 추가 자료 제공 – 공식 문서 외에도 리액트 코어팀 및 커뮤니티 정보 정리 이외에도 리액트 핵심 개념들을 깊이 있게 분석하여, 단순히 "리액트를 쓸 줄 아는 것"을 넘어, "알고 쓰는" 단계로 나아가도록 도와주는 책입니다. 🚀 챕터가 끝날 때마다 제공되는 복습 질문이 제공됩니다. 빈칸 채우기, 객관식 퀴즈 형식이 아니라 질문 형식으로 구성된 것이 인상적이었습니다. "정답을 맞추는 것"이 아니라, 해당 내용을 다시 고민하고 깊이 생각할 수 있도록 유도하는 방식입니다. 질문들을 해결하기 위해 자연스럽게 챕터를 여러 번 읽게 되고, 그 과정에서 개념이 더 확실히 자리 잡습니다. 개념을 스스로 설명할 수 있도록 유도하는 질문들을 통해 리액트의 원리를 더욱 탄탄하게 익히는 데 큰 도움이 됩니다. "전문가를 위한 리액트"는 리액트의 핵심 개념을 깊이 있게 다루며, 리액트 개발자로서의 역량을 한층 더 높일 수 있는 유용한 정보들을 제공합니다. 리액트를 깊이 이해하고 싶은 개발자, 기존에 리액트를 사용해 본 경험은 있지만 더 깊이 파고들고 싶은 개발자에게 강력히 추천하고 싶습니다. 리액트를 사용한다를 넘어, 그 내부를 깊이 이해하고 싶은 모든 개발자분들에게 최고의 선택이 될 것 같습니다. |
이 책은 리액트의 근간이 되는 메커니즘과 고급 사용 패턴, 모범 사례를 배우고자 하는 분들을 위해 아주 상세하게 리액트를 설명합니다. 따라서 단순한 사용법을 넘어 리액트가 어떻게 동작하는지 알고 싶은 분들에게 적합합니다. 많은 리액트 서적이 최종 사용자로서 리액트를 사용하는 방법에 치중합니다. 그에 반해 이 책은 최종 사용자가 아닌 라이브러리나 프레임워크 개발자 수준으로 리액트를 이해하도록 돕습니다.
"진짜"들만 모여라 - 리액트 역사부터 프레임워크 내부 원리까지늘 그래왔던 것처럼 책을 한 두 번 훑어보면서 느꼈다. 이 책은 진짜다! 책의 내용과 구성이 좋아서, 초급부터 고급 개념까지 차근차근 이해하며 읽을 수 있었다. 물론 React 참고서와 교육 문서도 정말 잘 만든 컨텐츠라 생각한다. 차이점은 React 컨텐츠는 최종 사용자로서 실제 개발에 유용한 느낌이고, 정보들이 링크를 통해 파편화되어 있어서 구조적으로 정돈된 느낌은 덜하다. 하지만 이 책은 전개 과정 중에 끊임없이 문제를 제기하고 해결해가며 자연스럽게 개념을 빌드업하고, 놓치는 내용이 없도록 질문을 통해 recap도 한다. 내용이 다소 무겁게 느껴질지라도 이러한 친절한 구성 덕에, 리액트를 보다 더 효율적으로 사용하고 싶어하는 초중급 개발자들에게 큰 도움이 될 것이라 생각한다. 첫 번째 장 [입문자를 위한 지식]에서는 리액트가 왜 존재하게 되었는지, 어떻게 동작하는지, 어떤 문제를 해결하려고 작성되었는지, 그리고 지금의 리액트 이전에는 다른 어떤 방식이 존재했는지, 역사적인 맥락과 해결하고자 했던 기술적 문제를 이해하는 시간을 갖는다. 이 장이 중요한 이유는 리액트를 하나의 문제 해결 도구의 관점으로서, 책을 보다 풍부한 관점에서 읽을 수 있도록 도와주기 때문이다. 저자는 역사 다큐멘터리 영상도 추천했는데, 이 80분 분량의 영상도 정말 의미있는 내용이 많으니 시청해보는 것을 추천한다. O 하나부터 열까지, 차근차근 쌓아올리는 리액트 개념이 책은 2장부터 7장까지의 리액트 개념과 10장까지의 프레임워크 내용을 차례대로 소개한다. 이전 장에 대한 이해를 전제로 다음 장을 전개하는 구성이므로, 각 장마다 제공하는 복습 질문에 나름 타당한 답을 낼 수 있을 때까지 반복하여 읽다보면 리액트에 대한 지식을 자연스레 쌓아나갈 수 있다는 것이 장점이다. X 다양한 API 활용은 리액트 학습 문서를 참고하자리액트에는 다양한 훅과 API가 존재한다. 하지만 모든 내용을 다룰 수는 없어, 핵심적인 부분만 다룬다. 따라서, 리액트에 대한 이해보다 리액트의 활용에 관심이 있다면, 앞서 언급한 학습 문서나 개발 문서가 더 큰 도움이 될 것이다. 추가적으로 최근 업데이트된 React 19의 변경 및 개선 사항에 대해서도 다루지 않는다. 마치며...요즘 대부분의 웹 프론트는 프레임워크는 달라도, 대부분 React를 기반으로 개발된다. 따라서, 프론트엔드 개발자를 희망한다면 이 책을 읽어볼 것을 강력히 추천한다! 실습 소스를 찾아 링크를 첨부하려 했는데 아쉽게도 찾지 못했다. 그래서 혹시라도 본 책의 내용을 직접 실습해보고 싶은 이들을 위해 전문가를 위한 리액트 - 계획을 시작으로 GitHub 레포에서의 실습을 진행 중에 있다. 참고하시길! |