리액트를 다루는 기술 개정판 출간 - 무엇이 달라졌을까?

velopert·2019년 8월 26일
14
post-thumbnail

안녕하세요! 리액트를 다루는 기술의 개정판이 출간되었습니다. 초판은 한동안 절판이 되어서 구매가 불가능했는데요..! 이제 드디어 개정판을 읽어보실 수 있게 되었습니다.

현재 yes24 에서 예약판매중 입니다 (링크)

이 포스트에서는 개정판에서 어떤 내용이 바뀌었는지 알아보도록 하겠습니다.


리액트를 다루는 기술 개정판이 만들어지면서, 내용들이 정말 많이 바뀌게 되었습니다. 2019년 초, 리액트 16.8 버전에서 Hooks라는 기능이 도입되면서, 리액트 컴포넌트 개발 방식에 정말 큰 변화가 생겼습니다. 기존에는 컴포넌트에서 상태 관리를 하기 위하여 클래스형 컴포넌트를 만들어서 사용하는 것이 필수였지만, 이제는 Hooks를 사용하여 함수형 컴포넌트에서도 상태 관리를 할 수 있게 됐습니다. 또한, 리액트 컴포넌트의 Lifecycle 메서드를 대체할 수 있는 Hooks 도 있어서 더 이상 클래스형 컴포넌트를 사용할 이유가 없게 되었습니다. 이에 맞춰, 책에서 사용된 주요 예시들을 모두 함수형 컴포넌트 형태로 전환하였습니다.

책에서 기존에 다루지 않았던 내용들도 새로 많이 수록되었는데요, 새로 수록되거나, 변경된 주요 내용들은 다음과 같습니다.

함수형 컴포넌트에서 Hooks 사용하기

최신 리액트 개발 패러다임에 맞춰 책에 있는 대부분의 예시를 함수형 컴포넌트와 Hooks를 사용하는 형태로 전환하였고, 리액트에 내장되어있는 Hooks API에 대한 내용을 자세히 다루는 장이 새로 추가되었습니다.

Immer 를 사용한 불변성 지키기

기존 초판에서는 Immutable.js를 사용하여 불변성을 쉽게 지키는 방법을 다뤘었는데, 사용방법이 까다롭고, 해당 라이브러리를 사용할 시 컴포넌트들을 만들게 될 때 Immutable.js 에 대한 의존이 생긴다는 단점 때문에 Immutable.js를 다루는 내용을 없애고 Immer를 다루는 내용을 추가하였습니다.

react-virtualized 를 사용하여 성능 최적화하기

성능 최적화를 하는 과정에서 초판에서는 shouldComponentUpdate를 통한 성능 최적화만을 다뤘었지만 여기서 더 나아가서 스크롤 밖의 컴포넌트들을 렌더링 하지 않는 방식을 사용하여 최적화를 하는 react-virtualized라는 라이브러리를 추가적으로 다루게 되었습니다.

뉴스 뷰어 프로젝트 만들기

리액트 프로젝트 개발의 경험치를 쌓기 위하여, 책 후반부의 커다란 프로젝트를 만들어보기 전에 책 내용의 중간에 작은 프로젝트를 다루는 내용을 추가하였습니다.

Context API를 사용한 전역 상태 관리하기

기존에는 리덕스를 사용해서 전역 상태를 관리하는 방법을 배웠었는데요, 리덕스를 사용하지 않고도 전역 상태를 관리할 수 있게 해주는 리액트의 내장 기능 Context에 대해서 다루는 내용을 추가하였습니다.

react-redux 에서 connect 함수 대신 useSelector / useDispatch Hooks 사용하기

리액트에 Hooks 가 소개된 이후, 리덕스에서도 connect 함수 대신에 Hooks를 사용하여 컴포넌트를 리덕스와 연동할 수 있게 되었습니다. 이에 대한 내용이 추가되었습니다.

redux-saga 미들웨어

초판에서는 리덕스에서 비동기 처리를 다루기 위하여 redux-pender라는 미들웨어를 사용했었는데요, redux-pender의 경우 사용법은 편리하지만 대중성이 떨어지기 때문에 책에서 해당 내용을 제외하고, redux-saga를 사용하여 편하게 비동기 작업을 관리하는 방법을 다루었습니다.

코드 스플리팅

초판에서는 컴포넌트 파일을 코드 스플리팅 하기 위하여 직접 withSplitting이라는 함수를 만들어서 사용했었는데, 이번 개정판에서는 해당 내용을 없애고 리액트에 새로 탑재된 React.lazy 와 Suspense를 사용하여 컴포넌트 코드 스플리팅을 하는 방법을 추가하였습니다.

서버사이드 렌더링

초판에서는 맨 마지막 프로젝트에서 서버사이드 렌더링을 구현했었는데, 이번 장에서는 따로 서버사이드 렌더링만 다루는 장을 분리하였습니다. 추가적으로, 초판에서는 코드 스플리팅과 서버사이드 렌더링을 하기 위해서 서버사이드 렌더링 시에는 코드 스플리팅을 사용하지 않는 방식을 사용하여 구현을 했었는데, 이번 개정판에서는 loadable-components라는 라이브러리를 사용하여 더욱 정석적인 방법으로 구현해보게 됩니다.

JWT 를 사용한 회원인증 시스템 구현하기

초판에서는 백엔드 API를 만드는 과정에서 단순 관리자 비밀번호 인증만 구현을 했었는데요, 이번에는 JWT 토큰 인증시스템을 기반으로 회원가입 및 로그인 기능을 구현해보게 됩니다.

마지막 프로젝트

책의 후반부에서 다루는 블로그 프로젝트도 처음부터 새로 작성되었습니다. 초판에서 다뤘던 기존 프로젝트와 주요 차이점은 다음과 같습니다.

  • redux-pender 대신에 redux-saga 를 사용합니다.
  • Immutable.js 대신에 Immer 를 사용합니다.
  • 마크다운 에디터 대신에 WYSIWYG 에디터를 사용합니다.
  • Sass + CSS Module 대신에 styled-components 를 사용하여 컴포넌트를 스타일링합니다.
  • 회원 인증 시스템이 개선되었습니다.
  • 모든 컴포넌트가 함수형 컴포넌트로 작성되었습니다.
profile
Frontend Engineer@RIDI. 개발을 재미있게 이것 저것 하는 개발자입니다.

15개의 댓글

comment-user-thumbnail
2019년 8월 26일

축하드립니다~~!
초판을 종이책으로 샀었는데 좀 무거워서 찾아보니 초판도 전자책이 있었군요ㅠㅠ
이번책은 전자책으로 사야겠네요ㅎㅎ

답글 달기
comment-user-thumbnail
2019년 8월 26일

고생하셨습니당
이번 것도 질러야겠네요 ㅋㅋㅋ

답글 달기
comment-user-thumbnail
2019년 8월 26일

구성 내용이 알차네요!!

답글 달기
comment-user-thumbnail
2019년 8월 26일

예약 주문하면 저자의 사인도 받을 수 있는건가요

답글 달기
comment-user-thumbnail
2019년 8월 26일

축하드립니다~ :)
맨위에 한문단이 중복되었네요 ㅎㅎ

답글 달기
comment-user-thumbnail
2019년 8월 26일

축하드립니다. 8월 말쯤 나온다고 얘기는 들었는데, 초판을 이북으로 사버려서 조금 두꺼워지고 몇몇 부분에서 개선되었나봐요.

답글 달기
comment-user-thumbnail
2019년 8월 26일

고생하셨습니당
리디북스에서 초판 샀었는데
이것도 사야되는 각인가 봅니다 ㅎㅎ

답글 달기
comment-user-thumbnail
2019년 8월 26일

내용이 너무 알찬것 아닌가요 🙇‍♂️

답글 달기
comment-user-thumbnail
2019년 8월 27일

다시 한번 축하드립니다.
고급 내용들이 많네요^^
eBook을 꼭 기다려서 사야겠어요.ㅎㅎ

답글 달기
comment-user-thumbnail
2019년 8월 28일

개정 내용이 어마어마하네요...

답글 달기
comment-user-thumbnail
2019년 8월 29일

eBook은 언제쯤 나올까요?

답글 달기
comment-user-thumbnail
2019년 8월 30일

많이 바뀌었네요 저도 ebook 기대합니다!

답글 달기
comment-user-thumbnail
2019년 9월 2일

우선 리스팩트!! 개정판 출간이라니 정말 독자에 대한 배려심이 깊다고 생각됩니다. 더불어 몇가지 궁금한 것을 여쭤 봅니다.

  1. 저는 redux-saga 만 써봤었는데요, 흔히 말하는 러닝 커브가 좀 있는 느낌을 받았습니다. 그러다 mobx-state-tree에 대해 알게 되었고 괜찮아 보인다는 생각을 했는데, 혹시 비교해 보셨는지, 만약 비교해 보았다면 그 중 redux-saga를 선택한 이유가 있는지 궁금합니다.(혹시 책에 써 있으려나..?)
  2. 최근 react만 쓰다가 vue를 공부해 보고 있는데, react 쓸 때는 설계에 대해서 고민하는라 시간을 많이 보냈었는데, vue를 접해보니 설계에 대해서 고민할 필요 없이 '이렇게 설계할 수 밖에 없는' 부분들이 있어 보였고, 그게 불편하기 보다는 최적의 설계 방향을 가이드 하는 느낌을 받아 좋았습니다. 그래서 그나마 익숙해진 react를 깊이 공부하는 것보다 vue를 새로 배우는 것에 더 관심을 가지고 있는 상황인데요, 본인은 개인적으로 어떤 느낌인지 '주관적인' 관점에서 말씀해주실 수 있을까요?
답글 달기
comment-user-thumbnail
2019년 9월 5일

cra 관련해서도 개정이 된건가요?

답글 달기
comment-user-thumbnail
2019년 9월 10일

금번 개정판 Ebook은 언제쯤 발매되나요?

답글 달기