리액트(React.js)를 배우는 방법

출처(번역) How to learn React.js

2020년 올해 많은 자바스크립트 개발자가 리액트 배우는 방법에 대해 관심을 가졌습니다. 최근 자바스크립트 생태계 설문조사에 따르면 많은 개발자가 모던 웹 어플리케이션을 만들기 위해 리액트를 선택했습니다. 리액트의 인기와 수요로 인해 많은 자바스크립트 개발자가 리액트를 배우고 싶어합니다. 이 가이드에서, 저는 초보자들이 다른 길로 새거나, 난이도의 벽을 느끼지 않게끔 리액트 학습에 대한 포괄적인 방법에 대해 알려드리겠습니다.

---

리액트"만" 배우기

배움에 왕도는 없습니다. 인내심을 갖고 학습해야합니다. 이건 모든 개발자에게 동일합니다. 개인적으로 제가 개발자가 되는걸 좋아하는 이유입니다. 개발자는 항상 새로운 것을 배워야합니다. 호기심을 가진 개발자라면 리액트에 절대 실망하지 않을겁니다. 학습은 도전정신과 기술이 균형을 이루는 한 기술을 연마할 수 있는 기회이자 도전입니다. 그래서 리액트를 배우는 데 시간이 걸릴 수 밖에 없습니다.

운좋게도, 리액트는 간단한 규칙을 따를 때, 러닝 커브가 없습니다. 그 규칙이란 "다른 기술에 현혹되지 말아야 한다" 입니다. 리액트는 단계별로 배우는겁니다. 자바스크립트와 리액트는 혁신을 추구하고 계속해서 진화하고 있습니다. 그러니 다른걸 배우기 전, 먼저 리액트를 배우고 가세요. 리액트를 모르는 개발자가 회사에서 리액트 작업을 할당받고 몇 달만에 작업을 마쳣다는 얘기를 들었습니다. 그들은 일하면서 리액트와 다른 멋진 기술들에 대해 배울 수 있는 기회가 되었습니다.

"저는 면접과제로 리액트 프로젝트를 제출해야 했습니다. 다음주 수요일까지 제출해야하는데 토요일에 앉아서 The Road to Learn React 책을 보며 작업하니 일요일에 작업을 마쳤습니다. 주말에 혼자 리액트로 작업하는데 정말 편리했습니다."

 

사람들이 리액트와 함께 배우고 싶어하는 몇가지 기술이 있습니다. 하지만, 저는 왜 함께 배우면 안되는지 리액트만 배워야하는지 간단하게 설명드리겠습니다.

타입스크립트로 리액트를 배울까요?

아니요. 타입스크립트를 배우기전에 리액트를 먼저 배우세요. 리액트 자체를 배우지 않았을 때, 자바스크립트와 타입스크립트를 혼용해서 쓰면서 엉망이 되고, 막막해질겁니다. 또한 리액트 강의나 자습서의 99%는 자바스크립트로 작성되어 있어서, 타입스크립트와 함께 배우기 더 어렵습니다.

Redux를 배울까요?

Redux는 자바스크립트의 유명한 상태 관리 라이브러리중 하나입니다. 하지만, 리액트와 리액트 내장 상태 관리를 배우는게 리액트의 핵심입니다. 대규모의 복잡한 어플리케이션을 개발할 때 상태 관리를 정교하게 하기 위해 Redux를 사용하세요. 리액트는 상태를 처리할 수 있는 많은 도구가 제공됩니다. 그래서 대부분의 리액트 프로젝트에서는 Redux나 다른 상태 관리 라이브러리가 필요하지 않습니다. Redux를 배우기전에 리액트 상태를 처리하는 방법을 배우세요. 초보자에게는 Redux가 리액트를 더 복잡하게 만들 뿐입니다.

Gatsby를 배울까요?

Gatsby는 최근 더욱 유명해졌습니다. Gatsby는 개인 웹사이트, 블로그같은 정적 웹 사이트를 만들기 위한 해결책입니다. 그러나, Gatsby를 배우려면 GraphQL도 배워야 하고 SSR에서 발생하는 문제도 생깁니다. Gatsby가 리액트를 더 쉽게 만들어준다고 착각하면 안됩니다. 리액트로 정적 웹 사이트 만드는 것이 쉬워지는거지, 리액트 자체를 배우는게 아닙니다.

위 기술들은 초보자가 리액트와 함께 배우려고 선택하는 몇가지에 불과합니다. 그 어떤 것도 함께 학습하지 마세요. 하나가 아닌 두 가지를 배워야하고 학습을 더 어렵게 만들겁니다. 리액트만 학습하고, 한번에 하나씩 배우세요.

리액트 학습 전제조건

리액트는 자바스크립트 라이브러리지만, 자바스크립트 자체를 배우는게 아닙니다. 그러나, 다른 프론트엔드 라이브러리와 비교할 때 자바스크립트를 많이 사용합니다. 따라서 자바스크립트를 모르면 리액트를 배울 수 없습니다.

 

그럼 리액트를 배울까요 자바스크립트를 먼저 배울까요?

먼저 ES5라고 부르는 자바스크립트 기본 사항을 이해해야 하고, HTML과 CSS에 대한 지식도 있어야합니다. 그리고 리액트는 ES6 이상의 자바스크립트를 사용합니다. 그러니 리액트를 배우려면 ES6에도 익숙해져야 합니다.

많은 사람들이 리액트를 배우기전에 자바스크립트 기초를 학습하는걸 권장합니다. 그들이 추천하는 기술은 리액트로 어플리케이션을 구축하는 것보다 훨씬 더 뛰어납니다. 그 중 몇 가지는 다음과 같습니다.

• 자바스크립트 일급 함수
• bind(), apply(), call()
• 스코프와 클로저
• this 키워드
• object 메소드
• arry 메소드
• 프로토타입 상속 -> ES6는 Class
• 콜백함수 및 Promise
• 이벤트 루프
• 이벤트 버블링
• 정규 표현식
• 에러 핸들링
• ES6 이상 자바스크립트
• Hoisting, Memoization
• 선언형 vs 명령형 프로그래밍
• 함수형 vs 객체지향 프로그래밍

이걸 전부 알아야할 필요는 없습니다. 어쩌면 웹 개발을 처음 접하는 초보자에게는 매우 실망스러울 수도 있습니다. 여러분은 실제 프로젝트를 진행하며 동기부여하고 싶지, 스코프와 클로저에서 계속 머무는걸 원하진 않을겁니다. 그러나 클로저를 파악하기 위한 순간은 계속될겁니다. 저는 리액트를 배울 때, 목록의 절반정도는 몰랐고 이들을 배우는게 귀찮아서 여전히 정규식을 사용할 때 찾아봐야 합니다.

 

저는 리액트를 배우는 과정에서 자바스크립트도 배울수 있다고 생각합니다. 그렇게 하면 웹 어플리케이션을 만드는 그 상황에 맞는 경험을 할 수 있습니다. 그 경험은 꽤나 흥미롭고 계속해서 우리가 열정을 가질 수 있게 해줍니다. 학습하는 열정을 유지하면서 빠르게 실제 프로젝트를 진행해보세요. 그리고 항상 궁금해하세요! 자바스크립트랑 리액트를 오가면서 학습해도 됩니다.

---

리액트를 배울까요? jQuery를 배울까요?

역사적으로 jQuery는 바닐라 자바스크립트와 최신 라이브러리(리액트, Angular, Vue)와의 갭을 줄여줬습니다. 오늘날처럼 자바스크립트가 브라우저에서 효과적이지 않았기 때문이죠. jQuery는 필요에 의해서 만들어졌습니다. 그러나 현대 자바스크립트는 jQuery없이 그들 자체적으로 처리할 수 있습니다. 제 권장사항은 jQuery를 배우지 마세요.

새 직장에서 리액트로 진행하는 프로젝트의 경우, jQuery를 사용하는 레거시 영역이 있을수도 있습니다. 그러나 jQuery는 그 순간 필요한 내용을 온라인에서 찾아 작업해도 괜찮습니다. 차라리, jQuery 코드를 리액트로 마이그레이션해서 학습할 기회로 삼으세요. 저는 Angular 초기에 자바스크립트 개발자가 되었지만, jQuery에 능숙해질 필요는 없었습니다. 대신에 리액트가 된 Angular와 함께 리액트에 집중했습니다.

---

리액트를 왜 배워야하나요?

왜 처음부터 리액트를 배우고 싶나요? 초보자는 자바스크립트의 최신 라이브러리에 대해 알고 있을수는 있지만, 종종 스스로한테 왜 필요한지는 모릅니다. 그냥 일자리가 많아서가 이유일 수도 있습니다. 하지만 정말로 왜 필요한지에 대한 질문은 스스로에게 던져봐야 합니다.

 

이건 리액트만이 아닙니다. 다른 모든 라이브러리, 프레임워크 더 나아가서 여러분이 개발자로 살면서 배우는 모든 것에 대해서 생각해봐야 합니다. 나에게서 무엇을 해결해줄까? 너무 자주 사람들이 라이브러리를 사용해야할 문제를 경험하지 않고, 그냥 기술위에 라이브러리를 얹습니다.

 

그래서 바닐라 자바스크립트와 리액트로 동일한 어플리케이션을 구현하는게 훌륭한 학습경험이라고 생각합니다. 바닐라로 해결해보면 라이브러리가 왜 유익한지 이해할 수 있습니다. 리액트, Angular, Vue와 같이 어떤 기술을 선택할지 결정할 때도 동일하게 적용할 수 있습니다. 선택한 기술로 어플리케이션을 구현하고 개발 경험을 비교합니다. 어떤게 가장 적합했나요?

---

리액트 단계별로 배우기

저는 공식 리액트 문서를 보고 배우는걸 강력 추천합니다. 문서는 최신 변경사항을 반영하고, 편향되지 않고, 리액트스럽게 가르치고 리액트 핵심 팀과 커뮤니티도 함께 구성됩니다.

---

리액트문서로 배우기

웹 개발 초보자로서 문서를 참조하는게 어려울 수도 있습니다. 하지만 그게 새로운 걸 배우는 가장 좋은 방법이라고 확신합니다. 개발자가 되는 과정에서 공식 문서를 자주 참조하게 되는데 지금 익숙해지는건 어떤가요? 문서를 보면 다음과 같은 이점이 있습니다.

• 초보자 튜토리얼이 포함됨
• 비 상업적
• 자율적인 학습
• 핵심 기여자와 커뮤니티가 결합됨
• 최신 버전에 대한 정보
• API 레퍼런스

저는 새로운 기술을 배울 때마다, 코스나 책을 확인하지 않고 기술 문서에서 튜토리얼이 있는지 확인합니다. 튜토리얼이 있으면 그걸 통해서 새로운 세계를 경험합니다. 그리고 저는 거기에서 항상 다른 학습자료를 확인할 수 있었습니다. 저는 항상 튜토리얼과 문서와 밀접하게 관련된 내용으로 가이드를 작성합니다. 이 방법이 초보자가 문서 사용법을 배우는데 도움이 되고, 그게 장기적으로 더 효율적이고 효과적으로 만들거라 생각합니다.

---

프로젝트로 배우기

리액트 튜토리얼을 통해 리액트의 기본을 익힌 후에 프로젝트를 진행하여 학습을 계속하세요. 프로젝트 아이디어를 떠올리는 것이 쉽지는 않지만 거기에는 많은 영감이 담겨있습니다.

에를 들어, 게임을 만들면서 리액트를 배우고 싶어하는 사람들도 있습니다. 리액트 TicTacToe 구현은 많이 찾아볼 수 있습니다. 직접 게임을 구현하고 다른 소스코드와 비교해보세요. 실수로부터 배우고 다른 사람의 코드와 비교하여 소스코드를 평가하는 방법을 배우게 됩니다.

---

실천하면서 배우기

실천하면서 배우기는 가장 일반적인 추천 방법입니다. 이건 다른 모든 것에 적용됩니다. 직접 프로그래밍 하는 것은 개발자로 성장하기 위한 새로운 도전을 제시합니다. 강좌, 자습서를 수동적으로 소비하는 건 너무 쉽습니다. 직접 굴러보면서 구현해보세요. 문제에 봉착하고, 절망하고, 생각하고, 결국 해결하며 그 결실을 거둡니다.

---

매일 실천하기

스스로 매일매일 코딩하기를 시도해보세요. 100일 코드 챌린지에 참여하거나, 트위터나 웹사이트에 글을 올릴수도 있습니다. 매일매일 하는걸 습관으로 만드세요. 이걸 지키고, 끈기있게 매일 코딩해야만 리액트 개발자가 될겁니다. 학습은 단거리 달리기가 아니라 마라톤입니다.

---

공개하면서 배우기

공적인 장소에서 학습하면 진행속도가 빨라집니다. 작업을 공유해서 다른 개발자에게 피드백도 받아보세요. 아래는 리액트에 대한 아이디어를 공유하는 몇 가지 플랫폼입니다.

• twitter
• reddit
• reactiflux

소중한 피드백을 받을 수 있을 뿐만 아니라 다른 토론에 참여하며 리액트에 더 깊이 들어갈 수 있습니다. 커뮤니티의 일원이 되세요. 학습하는 가장 좋은 방법은 그걸 다른 사람에게 가르치는 겁니다. 최근에 시작했더라도, 동료 리액트 초보자보다 앞서 있을수도 있습니다. 문제를 해결하도록 도울수 있는 React Subreddit의 React Beginner Thread를 확인해 보세요.

---

계속해서 배우기

모든 방면에서 리액트를 사용하는 방법을 배우세요. 리액트는 API 노출 영역이 작기 때문에 익숙해지도록 노력하세요.

• JSX 문법
• 리액트 컴포넌트
• 리액트 컴포넌트 구성요소
• 리액트 Props
• 리액트 상태

리액트를 이해하세요. JSX를 리턴하는 리액트 컴포넌트를 생성하고, 컴포넌트를 계층 구조로 배열하면서 다른 컴포넌트에서 또다른 컴포넌트를 사용하고, 컴포넌트간 데이터를 전달하고, 상태와 상호작용하게 만드는 데 많은 시간이 걸리지 않습니다. 하지만 이게 리액트의 핵심입니다. 학습한 내용을 프로젝트에 적용하여 심층적으로 배워야합니다.

---

초보자를 위한 리액트 설정

리액트 프로젝트는 어떻게 시작할까요? IDE가 설치되어 있지 않다면 CodeSandbox에서 사용해볼 수 있습니다. 리액트를 갖고 놀아보세요. 로컬에서 개발하려면 다음 방법을 확인하세요.

• Node 및 NPM으로 자바스크립트 실행: Node.js를 통해 브라우저 외부에서 자바스크립트를 실행할 수 있습니다. NPM으로 리액트같은 라이브러리를 설치할 수 있습니다. 거의 모든 최신 자바스크립트 프로젝트에서 두 도구가 모두 필요합니다.
• VS Code로 개발: 널리 사용되는 경량 IDE입니다. VS Code에는 리액트 개발을 위한 편집가와 터미널이 함께 제공됩니다.
• create-react-app 으로 배우기: 리액트 팀의 스타터팩으로 가볍고 추가 구성이 필요없습니다. 리액트 자습서의 99%가 이 스타터팩을 기반으로 합니다. 리액트가 주변을 자동으로 처리하는 동안 리액트 학습에만 집중할 수 있습니다.
• Prettier 포매팅: 개발환경에서 코드를 포매팅하는 포매터입니다. VS Code를 위한 간단한 설정 및 기능이 함께 제공됩니다. 리액트 코드 형식을 지정하는 방법을 보여주는 좋은 방법입니다.

---

리액트 심화

리액트 컴포넌트, Props, State(상태), JSX 문법을 학습하고, 리액트 개념 및 패턴에 대해 학습할 수 있습니다.

• Hooks
• 고차 컴포넌트
• Props 렌더링
• Context

고급 리액트 기법을 익히면 대규모 리액트 어플리케이션에 편하게 적응할 수 있습니다. Hooks는 고차 컴포넌트와 Props 렌더링을 덜 사용되게 만들 수 있지만 꽤 자주 볼 수 있을 겁니다.

---

온라인으로 배우기

리액트 기본과 심화에 대해 배웠다면, 온라인에서 다른 리액트 소스를 살펴볼 차례입니다. 초보자는 리액트를 배우기위해 콘텐츠만 소비하는 경우가 많기 때문에 이 가이드에서 매우 늦게 언급했습니다. 어플리케이션을 직접 개발하면서 발생하는 모든 문제는 온라인에서 찾아볼 수 있습니다. 온라인에서 모든 정보들을 확인해보면서 리액트를 배우세요. 한 종류의 학습 자료를 소비하는 것보다, 학습 자료를 다양화하는 것이 좋습니다.

• 튜토리얼
• 책
• 강의
• 웹 개발 또는 팟캐스트
• 코스

어떤 학습 자료가 적합한지는 사람마다 다릅니다. 학습 자료를 만드는 사람들의 교육 스타일도 마찬가지입니다. 모든 사람은 콘텐츠를 제작하고 제공하는 방법이 다르므로 자신한테 가장 잘 맞는 방식을 확인해보세요.

 

"처음 리액트 공부할 때 Udemy 코스를 구입했습니다. 하지만 동영상 몇개를 봐도 계속 해메고 있었습니다. 평점이 높은 그 선생님은 처음에는 쉽게 말했지만, 나중에는 이해하기 어려운 설명으로 저를 어렵게 했고, 개념과 코드를 파악하지 못했습니다."

 

독서가 좋다면, 온라인 튜토리얼과 리액트 책을 확인하세요. 인쇄본은 오프라인에서 리액트를 배우기에 좋은 자료입니다. 많은 사람들이 책이 구식이 되는걸 걱정하지만 요새는 새 버전을 제공하는데 하루밖에 안걸립니다. 오히려 글이나 영상 업데이트가 오래 걸립니다.

영상이 좋다면, 유튜브같은 개인 개발자가 제공하는 온라인 과정을 확인하세요. 앞에서 언급했듯이, 콘텐츠를 소비하는데만 머물지 마세요.

최신 리액트 뉴스를 확인하고 싶다면 팟캐스트는 좋은 자료입니다. 정기적으로 새로운 걸 공유하는 고수준의 개발자 이야기를 볼 수 있습니다. 팟캐스트는 출퇴근이나 운동중에 배울 수 있는 좋은 방법이기도 합니다. 적어도 저는 그렇게 합니다.

모든 사람이 무료로 학습할 수 있는 고품질의 리소스가 많이 있습니다. 누군가 제게 리액트 개발자가 되는 방법에 묻는다면 종종 FreeCodeCamp로 보냅니다.

어떤 종류의 자료를 선택하든 상관없이 배운 내용을 직접 사용해보며 실용성을 유지하세요. 수동적으로 콘텐츠를 소비하지 마세요. 적극적으로 도전하며 기술을 연마해야 합니다.

---

리액트 로드맵

리액트의 기본, 고급에 익숙해지면 리액트를 더욱 발전시킬 수 있는 방법이 많이 있습니다. 리액트 생태계는 혁신적이고 광범위합니다.

• 리액트 + react router: 리액트 어플리케이션에서 라우팅이 가능하게 해줍니다.
• 리액트 + Firebase: 리액트를 데이터베이스에 연결하고 사용자 인증/권한 부여를 구현할 수 있게 해줍니다.
• 리액트 + GraphQL: GraphQL 인터페이스로 Node.js 백엔드에 연결할 수 있게 해줍니다.
• 리액트 + Redux: 예측 가능하고 확장가능한 상태 관리를 도와줍니다.

---

마치며...

제 생각엔 여기까지입니다. 공부에 호기심을 갖고 매일 직접 해보고, 전념하고, 공개하고 꾸준히 하세요. 올해 기술을 발전시키고 리액트 개발자가 되기 위해 도전하세요!

추천 포스트

리액트 폴더 구조 설계 5단계

 

[Javascript] 신입, 취준생을 위한 현업에서 코드 짜는법(클린코드)