오랜만에 책을 읽었습니다. 제목에서 볼 수 있다시피 React와 관련된 책입니다.
제목에서부터 교과서를 표방하고 있길래 기대 반, 의심 반…
사실 안 그래도 방학 때 React 공부를 조금 하려고 했는데, 다른 공부에 힘을 쓰느라(?) 아주 깊게는 못 하고 책으로 퉁치고 말았습니다.
친구가 구매한 책이었는데 방학이라서 잠시 빌려 읽었습니다. 사실 방학은 6월 말부터 시작했지만 지금 포스트를 쓰는 이유는 두 달동안 게으름을 피우며 천천히 읽었기 때문(…)입니다. 아무튼 읽은 내용을 정리할 겸하여 오늘의 포스트를 작성하려 합니다.
그나저나 예전 포스트를 둘러보니, 평균적으로 일 년에 두 권 꼴로 책을 읽는 것 같네요. 올해는 아직 이 책 말고는 읽은 게 없어서, 남은 네 달동안 읽을만한 책을 한 번 찾아봐야겠습니다.
이번 포스트를 통해 이 책을 통한 React 입문에 관심이 있는 개발자분들에게 도움이 되었으면 좋겠습니다.
책을 읽기 전에
이 책은 2018년 5월에 초판 발행된 책입니다. 따라서, 함수형 컴포넌트 내에서 React의 기능을 사용할 수 있게 만드는 Hook의 개념은 본문에서 다루고 있지 않음에 유의해야 합니다.
현재 Hook이 React의 클래스형 컴포넌트를 대체하는 사실상 표준이 되었기 때문에, 이 내용을 책에서 다루지 않는 것은 사실 꽤 아쉬운 부분입니다. 시기 상 클래스형 컴포넌트의 막바지 쯤에 출간된 책이니 어쩔 수 없긴 하지만요. 그렇기 때문에 혹시라도 Hook에 대한 학습이 필요하신 분들은 다른 책을 찾아보시는 것이 좋을 것 같습니다.
책 소개
원서의 제목은 『React Quickly』 입니다. 저자에 따르면 프론트엔드 개발자가 쉽게 처할 수 있는 문제를 React를 통해 어떻게 해결하는지를 다루고, 이를 빠르게 달성할 수 있게 하는 것이 목표라고 합니다. 분량은 670쪽 정도인데, 예제 소스코드나 부록 등을 제외하면 분량이 아주 많지는 않습니다.
책은 크게 두 부분으로 나누어져 있습니다. 1부는 React의 기초 문법, 2부는 React 아키텍처에 대해 다룹니다. 책에서 인상깊게 읽은 몇 부분을 꼽아 내용과 감상을 요약해보겠습니다.
React의 핵심 개념
이 부분은 사실 이전부터 계속 써오던 Vue 사전 지식 덕분에 쉽게 읽을 수 있었습니다. React의 정의, JSX, 상태(State), 속성(Props), 라이프사이클, 이벤트, 폼 등의 내용을 다룹니다.
컴포넌트 기반 아키텍처(CBA, Component Based Architecture)는 React 이전에도 존재했다. … React는 템플릿 언어가 없는 순수한 자바스크립트를 기반으로 CBA를 구현해냈고, 이를 통해 컴포넌트 구성에 대한 새로운 시각을 창출해냈다.
- 37p
다른 라이브러리와 비교했을 때 React의 가장 큰 특징이기도 한데, 뭔가 멋있어서 인용해봤습니다.
UI를 함수로 만든 것이다. 여기에 데이터를 전달하고 호출하여 뷰를 렌더링하므로 뷰를 예측할 수 있었다. 이런 과정을 거치면서 React 팀은 메모리에서 DOM 요소를 생성하는 것은 빠르지만, 실제 DOM으로 렌더링하는 과정에서 병목이 발생한다는 점을 알게 되었다. React 팀은 DOM에서의 문제를 피하기 위한 알고리즘을 만들었다.
- 39p
React의 특징인 단방향 바인딩과 가상 DOM의 등장을 나타낸 부분입니다. 예전에 브라우저의 동작 원리 정리 포스트를 작성하면서, 제일 마지막으로 가상 DOM의 등장 배경에 대해서 설명한 바가 있죠.
순수한 자바스크립트로 구현한 컴포넌트 기반 아키텍처는 React 이전에 없었다. … 템플릿의 문제점 중 하나는 개발자가 다른 언어를 배워야 한다는 점이다. … 만약 X라는 템플릿 엔진을 사용하는 경우나 Y라는 도메인 특정 언어를 가진 프레임워크를 사용한다면 그 시스템에 구속되고 스스로를 X/Y 개발자라고 불게 된다. X나 Y를 사용하지 않는 프로젝트에 기존의 지식을 활용하기는 어렵다.
- 44p
여기에 대해서는 어느 정도 공감도 가면서 약간 찔리는 부분이 있었습니다. 템플릿 엔진 별 지원하는 문법이 다르기 때문에, 이게 비효율적이기도 하죠.
근데 물론 JSX도 순수 자바스크립트로 컴파일 된다고 하긴 하지만 그렇다고 해서 JSX도 배워야 할 게 없는 건 아니라서 약간은 애매한 부분입니다. Vue의 공식 문서에서도 비슷한 이야기를 찾을 수 있는데, 템플릿을 위한 도메인 특화 언어를 따로 배워야 하는 건 맞지만 그 차이가 매우 피상적인 수준이라고 이야기하고 있습니다.
저는 JSX를 많이 써보지 않아서 그럴 수도 있는데, 선호하는 편(?)은 아닙니다. 물론 템플릿을 완전한 프로그래밍 언어로 표현할 수 있다는 장점이 있긴 하지만 여전히 많은 개발자들 사이에서 논쟁거리죠.
React 팀은 버전 0.14 이후부터는 기존의 React를
react와react-dom이라는 두 패키지로 분리하고 npm에 배포하기 시작했다. React를 웹 개발뿐만 아니라 UI 개발이 필요한 환경이라면 어디에나 사용할 수 있는 라이브러리로 만드는 과정을 시작한 것이다.- 52p
저는 사실 React에서 맘에 안 들었던 것 중 하나가 라이브러리들이 잘게 찢어져(?) 있다는 것이었는데 그 이유를 새로 알게 되었습니다. 컴포넌트 작성과 렌더링 과정을 분리하여 다양한 환경에서도 React를 사용할 수 있게 한 것인데요, 이 덕분에 React 하나만으로도 다양한 환경에서 UI 구성을 쉽게 할 수 있다는 것은 확실히 대단한 장점인 것 같습니다. 대표적으로 React Native가 그러하네요.
React는 UI와 자바스크립트 로직에 대한 설명을 한 곳으로 모아, 기존의 어긋난 관심사 분리를 고쳐놓았다. JSX를 사용하면 코드가 HTML처럼 보이므로 읽고 쓰기가 간편하다.
-87p
전통적인 웹 개발은 HTML 파일에 템플릿을, JavaScript 파일에 로직을 작성했습니다. 하지만 지금은 이런 방식으로 개발하는 곳을 찾기 어렵죠. 템플릿과 로직이 강하게 연결되면서 상호작용이 많아졌기 때문입니다.
이를 해결하기 위해 React에서는 JSX를 이용해 템플릿과 로직을 파일 단위의 컴포넌트(SFC, Single File Component)라는 단위로 묶어놓았습니다. 이는 확실히 획기적인 시도였고 다른 라이브러리, 프레임워크에도 영향을 미쳤습니다.
bind()를 이용하면 이벤트 핸들러 함수가 클래스의 인스턴스인 React 엘리먼트에 대한 참조를 유지할 수 있다.- 177p
예제 코드에서 bind(this)를 JSX의 이벤트 핸들러, 클래스 생성자에서 바인딩 시켜주는 거는 아무리 봐도 어색하더라고요. 새삼 화살표 함수가 많이 그리워졌습니다.
크로스 브라우징 문제를 고치거나 우회하는 방법을 찾아내는 것은 CSS 문제, IE8 문제, 힙합 안경을 쓴 깐깐한 디자이너를 상대하는 것보다 더 골치 아픈 일이다. React의 방법은 브라우저 내장 이벤트를 감싸는 것이다.
- 187p
React에서는 크로스 브라우징 문제를 해결하기 위해, 브라우저 이벤트를 래핑하여 합성 이벤트(SyntheticEvent)를 쓴다는 부분에서 언급된 내용입니다. 아ㅋㅋ 깐깐한 디자이너는 못 참지
React 아키텍처
2부에서는 React의 아키텍처와 관련된 외부 라이브러리를 살펴봅니다. 번들러, 상태 관리 라이브러리, 테스팅 도구, 서버 사이드에서 활용 등을 다룹니다.
저는 이 부분에서 헷갈렸던 것들을 많았는데, 짚고 넘어갈 수 있었던 게 많았습니다. 한 단원에 하나씩 다루다보니까 깊게까지는 못 들어갔지만, 예제에 한해서는 자세히 설명이 되어 있었습니다.
Webpack이 프로젝트 내 모든 자바스크립트의 의존성을 분석한 후 다음과 같은 작업을 수행한다.
- 모든 의존 모듈을 올바른 순서로 불러오도록 한다
- 모든 의존 모듈을 한 번씩만 불러오도록 한다
- 자바스크립트 파일이 가능한 한 적은 파일로 묶여지도록 한다
-323p
번들러 부분 역시 예전에 작성해놓은 글이 떠올라서 재미있게 읽을 수 있었습니다. 여기에 대한 명령어들을 친절하게 설명해주어서 읽기도 편했습니다.
Flux 아키텍처: 액션에 의해 디스패처가 실행되고, 스토어에 전달되어 결과적으로 뷰를 렌더링한다.
- 387p
예전에 Redux와 Redux-Saga 쪽을 공부하다가 좀 어렵게 느껴졌던 기억이 나서, 빡집중해서 읽은 부분입니다. Vue에서도 비슷한 패턴으로 Vuex를 쓰기도 하죠. 근데 요즘에는 Recoil 같은 더 나은 선택지도 많은 것 같더라구요.
단일 페이지 애플리케이션은 브라우저 렌더링에 의존하므로 서버에 템플릿을 다시 구현하거나, 검색 엔진의 크롤러만을 위해 헤드리스 브라우저를 사용해서 정적인 HTML 페이지를 미리 생성하도록 해야 한다.
- 476p
서버 사이드에서 템플릿을 생성할 때 React를 활용하여 유니버셜 자바스크립트 아키텍처를 구성하는 부분입니다. 유니버셜이라는 이름이 꽤나 거창해보이지만, 쉽게 말해 풀스택을 자바스크립트로 구현한 것을 일컫는 말입니다.
서버 사이드에서 Node.js를 쓸 수 있다면, 서버에서 React를 컴포넌트를 렌더링하고 템플릿에 넣은 후 사용자에게 제공할 수 있습니다. 동시에 해당 컴포넌트를 클라이언트 사이드의 React에서도 활용할 수 있다는 특징이 있었죠.
이 개념이 다소 낯설게 느껴지기도 했지만, 저 역시도 SPA의 약점인 초기 렌더 속도나 SEO를 해결하기 위한 고민을 해 본 적이 있기 때문에 공감하게 되었습니다. 그리고 React의 범용성에도 새삼 감탄을…
느낀 점
교과서라는 이름답게 설명과 예제가 꽤나 친절하게 느껴졌습니다. 책 뿐만 아니라 동영상, Github에 업로드한 예제 코드 등으로 자료를 확인할 수 있다는 것도 좋았습니다.
난이도 역시 적절하게 분배가 되어 있었습니다. 초반에는 쉬웠지만 후반으로 갈수록 그 내용을 응용한 복잡한 내용들이 나옵니다. 특히 매 단원이 끝날 때마다 퀴즈, 각 부가 끝날 때마다 샘플 프로젝트가 나오기 때문에 이해와 복습에도 도움이 되었습니다.
이런 식으로 부가 설명이 있다
부가 설명에서도 공을 들인 모습이었습니다. 본문에 등장하는 낯선 개념들에 대한 추가 설명을 잘 달아놓았던 게 인상깊었습니다. 가령 React를 사용하기 위해 필수적으로 알아야 하는 ES6 문법이라던가, 프로젝트 환경 설정, 바벨이나 웹팩 커맨드를 셸에서 쓰는 법들이 기억나네요. 다만 본문에서는 개략적인 사용법 위주로 다루고 있기 때문에, 보다 능숙한 사용을 위해서는 따로 프로젝트 진행이나 공부를 해야할 듯 합니다.
아쉬운 점
이 책이 번역되고 출간되기까지의 시간이 꽤 걸렸기 때문에, Hook을 비롯한 일부 기술 스택을 다루지 못한 것이 아쉽다고 위에서 이야기한 바 있습니다. 아키텍쳐 구성에서 TypeScript가 들어있지 않은 것도 약간 아쉽긴 합니다.
그럼에도 불구하고 이 책은 저에게는 꽤 도움이 되었습니다. 그 이유는 제가 마지막으로 React를 다뤄봤던 것이 꽤 오래전이어서, 아직까지는 클래스형 컴포넌트가 더 익숙하게 느껴졌기 때문입니다.
그래서 Hook으로 넘어가기 전에, 클래스형 컴포넌트에 대한 지식들을 한 번 쓱 정리하고 넘어간다 라는 마인드로 봤을 때에는 꽤 괜찮았습니다. 저는 React로 대형 프로젝트를 경험해 본 적은 없었기 때문에, 관련 지식들이 좀 파편화된 상태로 남아있었기 때문입니다. 그래서 뭔가 주워들은 건 많은데 어렴풋하게만 아는 상태(…)였죠. 다들 Hook 좋다고 이야기는 하지만, 이게 하늘에서 갑자기 뚝 떨어진 것도 아니고 애초에 클래스형 컴포넌트에서의 단점을 보완하기 위해 나온 것이잖아요.
아무튼 저는 이 책을 약간의 추억 보정(?)을 곁들여 읽기도 했고, 출간된 지 시간이 꽤 많이 흐른 것도 사실입니다. 하지만 React에 대한 기초 설명과 프로젝트가 자세하게 설명되어있기 때문에, 앞서 말한 것들을 감안한다면 추천할 만한 책입니다.
