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

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

현재 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 를 사용하여 컴포넌트를 스타일링합니다.
• 회원 인증 시스템이 개선되었습니다.
• 모든 컴포넌트가 함수형 컴포넌트로 작성되었습니다.