[서평] 전문가를 위한 리액트

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

---

전문가를 위한 리액트 / 테자스 쿠마르 지음 / 한빛미디어

 

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

 

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

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

 

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

 

How A Small Team of Developers Created React at Facebook

🙆‍♂️ 하나부터 열까지, 차근차근 쌓아올리는 리액트 개념

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

⭐️ 챕터별 체크 리스트

1. 입문자를 위한 지식
   
   • 리액트를 만들게 된 동기가 무엇인가요?
   • 리액트가 MVC와 MVVM 같은 이전 패턴보다 개선된 점은 무엇인가요?
   • 플럭스 아키텍처의 특징은 무엇인가요?
2. JSX
   • JSX란 무엇이며, 장단점은 무엇인가요?
   • JSX와 HTML의 차이점은 무엇인가요?
   • 텍스트 문자열은 어떻게 기계어가 되나요?
   • JSX 표현식이란 무엇이며 어떤 좋은 점이 있나요?
3. 가상 DOM
   • DOM이란 무엇이며, 가상 DOM과 어떻게 다른가요?
   • 문서 조각이란 무엇이며, 리액트의 가상 DOM과 어떤 점에서 비슷하고 다른가요?
   • DOM에서 문제가 되는 사안은 무엇인가요?
   • 사용자 인터페이스를 더 빠르게 업데이트하는 데 가상 DOM이 어떻게 활용되나요?
   • 리액트의 렌더링은 어떻게 작동하나요? 이로 인해 잠재되었던 어떤 문제가 발생할 수 있나요?
4. 재조정
   • 리액트의 재조정이란 무엇인가요?
   • 파이버 데이터 구조의 역할은 무엇인가요?
   • 왜 트리가 두 개 필요한가요?
   • 애플리케이션이 업데이트되면 어떻게 되나요?
5. 자주 묻는 질문과 유용한 패턴
   • 리액트에서 메모화란 무엇이며, 컴포넌트 렌더링을 최적화하는 데 어떻게 사용할 수 있을까요?
   • 리액트에서 상태 관리를 위해 useReducer를 사용하면 어떤 우세한 점이 있으며, useReducer는 useState와 어떻게 다른가요?
   • React.lazy와 Suspense 컴포넌트를 사용하는 리액트 애플리케이션에서 지연 로딩을 어떻게 구현할 수 있나요?
   • 리액트에서 메모화를 사용할 떄 발생할 수 있는 잠재적 문제는 무엇이며 어떻게 완화할 수 있을까요?
   • 리액트에서 컴포넌트에 프롭으로 전달된 함수를 메모화하기 위해 useCallback 훅을 어떻게 사용할 수 있나요?
6. 서버 사이드 리액트
   • 리액트 애플리케이션에서 서버 사이드 렌더링을 사용할 때 유리한 주요 장점은 무엇인가요?
   • 리액트에서 하이드레이션은 어떻게 작동하며 왜 중요한가요?
   • 재개 가능성이란 무엇인가요? 하이드레이션보다 좋다고 주장하는 근거는 무엇인가요?
   • 클라이언트 사이드 렌더링의 주요 장점과 약점은 무엇인가요?
   • 리액트에서 renderToReadableStream과 renderToPipeableStream API의 주요 차이점은 무엇인가요?
7. 리액트 동시성
   • 리액트의 파이버 재조정자는 무엇이며, 복잡한 고성능 애플리케이션을 처리하는 데 어떻게 도움이 되나요?
   • 리액트에서 업데이트 예약 및 지연의 개념을 설명하세요. 부하가 많은 상황에서도 원활한 사용자 경험을 유지하는 데 어떻게 도움이 되나요?
   • 리액트의 렌더 레인이란 무엇이며, 업데이트 실행을 어떻게 관리하나요? 렌더 레인이 비트마스크를 사용해 여러 우선순위를 처리하는 방법을 설명하세요.
   • 리액트에서 useTransition과 useDeferredValue 훅을 사용하는 목적은 무엇인가요? 각 훅이 유용한 상황을 설명하세요.
   • useDeferredValue를 사용하는 것이 부적절한 상황은 어떤 상황일까요? 이 훅을 사용할 때 고려할 장단점은 무엇인가요?
8. 프레임워크
   • Next.js나 Remix 같은 리액트 프레임워크를 사용하는 주된 이유와 이때 얻는 장점은 무엇인가요?
   • 리액트 프레임워크를 사용할 때 생기는 장단점이나 불리한 점에는 어떤 것이 있나요?
   • 프레임워크로 해결되는 일반적인 문제에는 어떤 것이 있나요?
   • 프레임워크는 이런 문제를 어떻게 해결하나요?
9. 리액트 서버 컴포넌트
   • 리액트 서버 컴포넌트의 주된 가치는 무엇인가요?
   • 클라이언트 컴포넌트가 서버 컴포넌트를 가져올 수 있나요? 그렇게 답변한 이유가 무엇인가요?
   • 서버 컴포넌트와 기존 클라이언트 전용 리액트 애플리케이션 사이에는 어떤 트레이드오프가 있나요?
   • 모듈 참조란 무엇이며, 리액트는 재조정 과정에서 모듈 참조를 어떻게 처리하나요?
   • 서버 액션은 어떤 방식으로 리액트 애플리케이션의 접근성을 향상시키나요?
10. 리액트 대체제
    • 리액트, 뷰, 스벨트, 솔리드, 앵귤러의 반응형 모델은 각각 어떻게 다른가요? 이러한 차이가 라이브러리/프레임워크의 성능과 개발 환경에 어떤 영향을 미치나요?
    • 성능을 극대화하는 퀵의 고유한 접근 방식을 설명해 주세요. 지금까지 살펴본 UI 라이브러리/프레임워크의 접근 방식과 어떻게 다른가요?
    • 이 장에서 설명한 각 UI 라이브러리/프레임워크의 주요 강점과 약점은 무엇인가요? 이러한 강점과 약점이 특정 프로젝트의 라이브러리/프레임워크 선택에 어떤 영향을 미칠까요?
    • 리액트는 전통적인 의미의 반응형이 아닙니다. 이를 뷰 또는 스벨트 같은 라이브러리에서 볼 수 있는 '푸시 기반(push-based)' 반응형 모델과 비교해 자세히 설명하세요.
    • 리액트 컴파일러란 무엇인가요? 어떻게 작동하나요? 시그널과 비교하면 어떤가요?
11. 마치며
    • 모범 사례를 재고해 보세요
    • JSX의 작동 방식을 완벽하게 이해하세요
    • 제약은 나쁘지 않습니다
    • 선언적 추상화로 강력한 기능을 사용합니다
    • 강력한 기능을 활용하면 더 유연하고 유지 보수가 용이한 애플리케이션을 구축할 수 있습니다
    • 강력한 기능을 자체 프로젝트에 활용합니다
    • 사용자 경험이 개선됩니다
    • 여러분도 충분히 이해할 수 있습니다
    • 사용자에게 훨씬 적은 코드를 배포하세요
    • 프레임워크에서 얻은 영감을 여러분의 프로젝트에 적용할 수 있습니다

🙅‍♂️ 다양한 API 활용은 리액트 학습 문서를 참고하자

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

---

마치며...

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

GitHub - ooMia/fluent-react: Designed for practicing the concepts and exercises from the book 'Fluent React (전문가를 위한

Fluent React