<러닝 리액트> 리뷰

책을 읽기전 리액트 공부방법

리액트를 처음 알게된건 오래됐는데 2018년 후반에 들어서야 본격적으로 공부해보고 사용해보게 되었다. 개인적으로 예전부터 공부할 때 책을 보며 밑줄 그어가며 익히는 것을 좋아했지만, 개발 공부를 시작하면서 많은 자료와 아이디어를 얻을 수 있는 구글에 의존하기 시작했다. 그래서 리액트를 공부해야겠다고 생각했을 때 제일 먼저 리액트 강의를 구글링해봤다. 역시나 이미 나보다 훨씬 훌륭한 블로거분들이 리액트에 대한 강의를 올려주셨고, 튜토리얼같은 느낌으로 따라해가며 공부했다.

이 방법은 나처럼 실제로 코드를 돌려보지않으면 금방 지루해지고 이해가 잘 안되는 사람한테는 참 좋은 방법이라고 생각한다. 실제로 나도 VELOPERT님의 블로그 강좌 로 리액트 기초를 공부했고, 토이 프로젝트로 서비스를 개발해보면서 막힐 때마다 구글링으로 잘 만들어진 코드를 따라하며 세부적인 기능을 만들어보고 익혔다. 하지만, 필요에 따라 부분적으로 공부하다보니 서비스를 하나 다 만들어보고도 리액트가 뭔지 잘 모르겠다는 느낌이 들었다.

<러닝 리액트> 를 읽고,

그러던차에, 한빛미디어의 <러닝 리액트> 를 빌려보게 되었다. 보통 서점에가서 리액트 책을 찾아보면 JSX 소개부터 시작하는데 특이하게 이 책은 맨 처음에 ES6 문법 과 함수형 프로그래밍 에 대한 소개가 있었다. 이 부분이 나는 개인적으로 매우 좋았다. 처음 리액트를 공부할 때 리액트도 낯설었지만 ES6 문법에 익숙하지 않아서 어려웠던 부분도 있었다. 리액트는 ES6 문법으로 개발하는 것이 훨씬 편하기 때문에 이 파트를 읽고 나면 ES6 문법이 낯선 사람들도 자연스럽게 리액트에 접근할 수 있겠다고 생각했다. 또한 리액트의 UI 구현 방식이 함수형 프로그래밍과 밀접하기 때문에 함수형 프로그래밍에 대해서 이해하고 있다면, 좀 더 리액트를 풍부하게 사용할 수 있을 것 같다는 생각이 들었다. 이 생각을 하면서 동시에 이 책을 먼저 읽고 서비스를 구축해봤다면 훨씬 멋진 코드를 짤 수 있었겠다는 개인적인 생각도 들었다.

ES6의 화살표 함수 설명 부분

그리고 리액트를 공부할 때 의외로 가장 어려운 부분이 webpack 이라는 모듈 번들러를 이용해 개발환경을 설정하는 것이었다. create-react-app 을 이용하면 이런 부분을 덜 신경쓰고 바로 리액트로 개발할 수 있긴하지만 개발 환경 설정에 대해 어느 정도는 공부해야 나에게 맞는 환경을 설정하면서 사용할 수 있기 때문에 중요한 부분이라고 생각하는데, 이 책에서 비중있게 다뤄줘서 좋았다.

웹팩 소개와 설명

또 하나 좋았던 점은, 사소하지만 알지 못했던 유용한 팁 을 많이 얻었다. 예를 들면, 리액트 라우터를 사용할 때 페이지 라우터 명을 상수로 지정하는 이유를 모르고 구글링하며 찾은 다른 분의 코드를 따라하며 개발하다보니 자연스럽게 사용하고 있었는데 이 책에서 왜 그렇게 사용해야하는지 알게되었다.
(책에서는 리덕스 설명에 나와있긴 하지만 같은 이유인 것 같다. 액션을 상수로 지정해 철자 실수를 브라우저에서 변수 오류로 추적할 수 있어서 도움이 된다고 한다.)

리덕스 는 아직 사용해보지 않았는데 이 책을 읽고 사용해보고 싶어졌다. 여러 페이지가 있는 서비스를 만들다보니 당연히 상태관리는 각 페이지마다 해야한다고 생각했다. 그런데 서비스 구축이 다 끝난 후에 DB를 마이그레이션할 일이 생겼는데 DB구조와 사용하는 함수가 약간 달라져서 데이터와 상태관리가 필요한 컴포넌트를 연결하는 코드를 모두 변경해야 했다. 다행히 내 서비스는 페이지가 얼마 안돼서 약간의 번거로움만 있었지만, 훨씬 복잡하거나 큰 서비스였다면 불필요한 작업이 많이 필요했을 것이다. 항상 이런 일이 있을 때마다 코드의 재사용성 에 대해 다시 한번 생각하게 된다. 그런 면에서 리덕스 컨셉에 대해 읽고 나니, 내가 순수하게 리액트만 사용해서 만든 데이터 관련 코드를 리액트 리덕스 를 사용하면 훨씬 재사용성있는 코드로 바꿀 수 있을 것 같았다. 하지만 전역 상태 관리 용도로만 사용할 거라면 굳이 리덕스를 사용할 필요없이 Context API 만 사용해도 무관하다.

리덕스의 기본 컨셉

살짝 아쉬운 부분도 있었다. 섹션마다 예제 위주의 설명이 있었기 때문에 빠르게 이해하고 넘어가기는 좋았지만 주요 기초 개념들에 대해 깊게 이해하기는 어려웠다. 특히 리액트에서 가장 중요하다고 생각하는 가상 DOM을 이용하는 컨셉에 대한 자세한 설명과 state와 props에 대한 개념 설명이 부족하다고 느꼈다. 반대로 응용편이라 생각하는 리덕스와 서버랜더링에 관한 파트는 분량과 난이도가 꽤 있었다. 하지만 앞의 기초개념에 비해 훨씬 분량이 많았음에도 난이도가 있다보니 실제 개발에 적용하기에는 부족하다고 느껴서 책으로 간단하게 읽고 자세한 부분은 개인적으로 찾아보면서 공부하는 방법이 병행되어야 할 것 같았다.

이 책의 추천 대상

아마 리뷰에서 느꼈겠지만, 이 책은 초보자에게 추천한다. 아마 처음이라면 조금 어렵게 느껴지는 부분도 있을텐데 나는 정말 빠르게 읽혔다. 최신 JavaScript로 설명하고 있기 때문에 JavaScript는 알지만 ES6는 낯선 분, JavaScript 프레임워크나 라이브러리로 개발해본 적이 없는 분이라면 이 책을 읽어보면 쉽게 이해할 수 있을 것이다.