finalwords.md

마치는 글

드디어 마지막 장입니다. 이 책을 읽는 모든 분들이 읽는 내내 즐거웠길 바라며 리액트를 알아가는데 큰 도움이 되었길 바랍니다. 그리고 리액트를 배우고 싶은 친구, 개발자, 커뮤니티에 소개해주길 바랍니다. 물론 무료로 알려줘야 합니다. 5분을 투자해 아마존 또는 굿리드에 서평을 남겨주시면 저자에게 큰 힘이 될 것입니다.

이 책을 끝낸 마친 후 어떻게 무엇을 공부하면 될지 궁금하셨죠? 이 책에서 실습한 애플리케이션을 발전시키거나 나만의 리액트 프로젝트를 새로 만들어 보며 리액트 심화 학습을 시작할 수 있습니다. 다른 내용을 배우기 전에 간단한 소규모 프로젝트를 만들면서 배운 내용을 충분히 학습하는 것이 좋습니다. 일주일 동안 개발해보고 배포한 결과물을 다른 사람들에게 보여주세요. 그리고 저에게도 트위터로 알려주길 바랍니다. 이 책을 마친 여러분들이 어떤 것을 만들었는지 무척 궁금합니다.

기본적인 리액트 개발에 익숙해졌다면, 아래 주제로 심화 학습을 진행할 수 있습니다.

• 상태 관리 지금까지 우리는 this.setState()와 this.state를 사용해 로컬 컴포넌트 상태를 관리했습니다. 처음에는 괜찮지만, 규모가 큰 애플리케이션에서는 리액트 컴포넌트 내부 상태만으로 한계가 있습니다. 때문에 Redux 또는 MobX와 같은 상태 관리 라이브러리를 사용합니다. 저자의 온라인 강좌 사이트 React to React에서 "리액트 상태 다루기(Taming the State in React)"강좌 수강을 권장합니다. 이 강좌에서 리액트 state, Redux, Mobx를 다루며 전자책이 제공됩니다. 그 외 실습과 화상 채팅도 마련되어 있습니다.

• 데이터베이스 및 인증 리액트 애플리케이션 규모가 커질수록 결국에는 데이터를 저장할 공간이 필요합니다. 데이터는 데이터베이스에 저장되어 브라우저 세션 후에도 유지되고 애플리케이션 내 사용자 간 공유될 수 있어야 합니다. 가장 간단한 방법은 파이어베이스(Firebase)를 사용하는 것입니다. 파이어베이스 인증 완벽 튜토리얼에서 리액트와 파이어베이스 회원가입-로그인-로그아웃 기능 개발 방법을 설명했습니다. 그 외에도 파이어베이스로 실시간 데이터베이스를 사용해 사용자 기록을 저장할 수 있습니다. 이후 더 많은 용량의 데이터베이스가 필요할 수 있겠습니다만 각자의 판단에 맡기도록 하겠습니다.

• 웹팩(Webpack)과 바벨(Babel) 사용 이 책에서는 create-react-app로 애플리케이션을 부트스트래핑했습니다. 어느 정도 리액트에 익숙해지면 다른 툴들을 배우고 싶을 것입니다. 초기 설정을 create-react-app 대신 웹팩과 바벨을 사용할 수 있습니다. 이외 ESLint로 코드 품질 관리를 할 수 있습니다.

• 리액트 컴포넌트 문법 리액트 컴포넌트 구현 및 구성 방법은 지속적으로 수정되며 발전하고 있습니다. 특히 리액트 클래스 컴포넌트를 작성 방법과 관련된 다양한 리소스를 쉽게 찾을 수 있습니다. 깃허브 리퍼지토리에 리액트 클래스 컴포넌트 작성 방법을 기술했습니다. 클래스 필드 선언을 사용하면, 코드를 더 간결하게 작성할 수 있습니다.

• 개인 프로젝트 리액트 기초를 학습한 후, 개인 프로젝트를 진행하면서 배운 내용을 적용해보는 것이 좋습니다. 리액트로 틱-택-토(tic-tac-toe) 게임이나 간단한 계산기를 만들어 보세요. 온라인에서 무료로 제공되는 리액트 실습 튜토리얼이 많이 있습니다. 저자가 만든 페이지 매김 및 무한 스크롤 목록, 트위터 목록 표시, 리액트와 Stripe 결제 연동 프로젝트를 참고하길 바랍니다. 작은 규모의 리액트 애플리케이션을 만들어 보면서 리액트에 익숙해지는 것이 중요합니다.

• UI 컴포넌트 처음부터 프로젝트에 UI 컴포넌트 라이브러리를 도입하지 마세요. 순수한 표준 HTML 요소와 리액트만으로 다이얼로그, 드롭다운 메뉴 등을 구현하는 방법에 익숙해지는 것이 제일 중요합니다. 이들 컴포넌트의 대부분은 자체적으로 로컬 상태를 관리합니다. 예를 들어 체크 박스는 체크 여부를 로컬 상태를 통해 확인하기 때문에 제어된 컴포넌트로 구현해야 합니다. 가장 기본적인 기능을 구현한 다음, UI 컴포넌트 라이브러리를 도입해 해당 라이브러리의 체크박스나 다이얼로그 컴포넌트를 사용하도록 합니다.

• 코드 구성 4장에서 코드 모듈 구성 방법을 다뤘습니다. 아직 해보지 않았다면 지금 해보길 바랍니다. 컴포넌트를 구조화된 파일 및 폴더(모듈)로 구성할 수 있습니다. 코드 분할, 재사용 가능성, 유지 보수성 및 모듈 구성을 통해 API 설계 원칙을 이해할 수 있습니다.

• 테스트 이 책에서 테스트 맛만 보여줬습니다. 리액트 애플리케이션의 콘텍스트에서 단위 테스트 및 통합 테스트 개념을 심도 있게 파고들어야 합니다. 지금 단계에서는 Enzyme와 Jest로 단위 테스트와 스냅샷 테스트를 지속적으로 진행하는 것이 좋습니다.

• 라우팅 리액트 라우터(react-router)를 사용해 리액트 애플리케이션의 라우팅을 구현할 수 있습니다. 우리는 단일 페이지 애플리케이션만 만들었습니다. 리액트 라우터로 각 URL마다 페이지를 만들 수 있습니다. 애플리케이션에 라우팅을 도입하면 웹 서버에 다음 페이지를 요청하지 않아도 됩니다. 라우터는 클라이언트에서 모든 것을 처리합니다.

• 타입 검사 이 책에서는 PropType을 사용하여 컴포넌트 인터페이스를 정의했습니다. PropType를 사용해 버그를 방지하는 것이 좋습니다. 그러나 PropTypes는 런타임에서만 체크합니다. 한 단계 더 나아가 컴파일 타임에 정적 타입 검사를 도입할 수 있습니다. 그중 타입스크립트(TypeScript)가 제일 유명합니다. 이외에 플로우(Flow)도 있습니다. 플로우로 강력한 애플리케이션을 만들 수 있기 때문에 이를 추천합니다.

• 리액트 네이티브 리액트 네이티브(React Native)은 크로스 플랫폼 모바일 개발 도구입니다. 리액트에서 학습한 내용을 토대로 iOS와 안드로이드 애플리케이션을 만들어 볼 수 있습니다. 리액트에 대해 이미 잘 알고 있다면 리액트 네이티브는 쉽게 시작할 수 있습니다. 리액트와 리액트 네이티브의 기본적인 내용은 같고, UI만 다를 뿐입니다. 익숙했던 웹 UI가 아닌 모바일 UI를 새로 접하게 될 것입니다.

저자 웹 사이트에서 웹 개발 및 소프트웨어 엔지니어링에 관련 글을 읽을 수 있습니다. 뉴스레터 구독신청을 하면 매달 책과 글 강좌에 관한 소식을 받을 수 있습니다. 이외에 The React to React 온라인 강좌 사이트에서 리액트 심화 강좌를 수강할 수 있습니다.

마지막으로 저자의 콘텐츠 제작 지원을 도와주실 후원자를 찾고 있습니다. 아직도 전 세계의 많은 학생들은 경제적인 어려움으로 유료 교육 컨텐츠를 구입할 수 없습니다. 저는 이들을 돕고자 컨텐츠를 무료로 배포하고 있습니다. 후원자로 함께 해주신다면, 향후 제작되는 컨텐츠 또한 무료로 배포할 수 있을 것입니다.

이 책을 마쳤다면, 주위에 리액트를 소개해주고 싶은 사람이 누구인지 한 번쯤 생각해보는 시간을 가졌으면 합니다. 그리고 그 사람에게 이 책을 소개하며, 자신의 리액트 개발 경험과 지식을 나누길 바랍니다. 앞으로도 독자 여러분들이 보내주신 뜨거운 성원과 관심에 힘입어 "리액트 도움닫기"는 꾸준히 성장하고 발전해 나갈 것입니다.

끝까지 읽어주신 여러분들에게 감사드립니다.

로빈 올림