React 공부 시 참고해야 할 5가지

SPA가 생겨나면서 React.js, Angular, Vue가 큰 주목을 받고 있다. 그 중에서도 Facebook이 제공하는 오픈 소스 라이브러리 React는 현업에서 가장 많이 쓰이고 있고, 기존의 JavaScript 개발자들의 큰 생산성 향상에 기여하고 있다.

 

SPA (Single Page Application)
차세대 패러다임. 단일 페이지 어플리케이션은 브라우저에 로드되고 난 뒤에 페이지 전체를 서버에 요청하는것이 아니라 최초 한번 페이지 전체를 로딩한 후 이후부턴 데이터만 변경해서 사용할 수 있는 웹 어플리케이션 -> Angular, Vue, React가 생겨난 배경

필자 또한 React를 접하게 된 지 그리 길지 않아 능숙하지는 않지만, 학습 과정에서 여러 가지 방법들을 거쳐보면서 이렇게 공부하면 더 좋겠다 싶은 점들을 정리해보았다. 입문자 혹은 React를 공부하면서 잘 해내고 있는건지 의문이 드는 분들에게 도움이 되고자 포스팅을 해 본다.

 

React는 프레임워크가 아닌 *라이브러리*이기 때문에 앱의 규모가 커질수록 신경 써야하는 부분들이 많아져 난이도가 급 상승한다. 따라서 우리는 시작부터 React를 통한 거창한 프로젝트를 만들겠다는 큰 '욕망'을 잠시 접어두고, 어떻게 하면 이 라이브러리를 기존의 JavaScript 코드에 쉽고 간편하게 적용할 수 있는가에 대해 고민하며 겸손한 태도로 학습할 필요가 있다.

 

 

 

---

 

 

1. ES6 문법과 JavaScript Immutability를 이해하고 시작하자.

React의 props, state 개념은 위 내용을 빼 놓고는 설명할 수 없다. JS Immutability에 대한 이해 없이 React를 접한다면 튜토리얼이 이후 혼자서 코드를 짤 때의 험난한 여정이 예상된다...

 

[이전 글 참조] 2020/02/29 - [JavaScript] - JavaScript Immutability

 

 

2. React 는 책 대신 공식 문서로 시작하자.  react 공식 문서 링크

공부의 첫 시작은 무조건 서점에서 시작하는 사람들이 있다. 하지만 React 만큼은 공식 관련 문서와 tutorial을 직접 진행하고 관련 자료들을 찾아보면서 직접 적용하는 방식으로 공부하는 것을 가장 추천한다. 이 방법이 가장 짧은 시간 내에 양질의 지식을 얻을 수 있는 방법임은 확실하다. 

 

 

3. React 관련 구글링 시 지난 1년 이내로 설정 후 검색하자.

정말 빠르게 변화한다. 정말로...

 

 

4. simple하게 가자.

처음에는 CRA(create react app)을 통해 너무너무 간단한 앱을 만든다.

(간단한 토글 버튼 or 간단한 카운터 앱 추천)

 

간단히 만든 앱에 Redux를 적용한다. 그 앱에 React-Redux를 적용한다.

완전히 이해가 될 때까지 기본 앱 -> Redux -> React-Redux 를 반복한다.

이를 반복하면서 자연스러운 앱을 작성할 수 있다면 React를 거의 마스터했다고 봐도 무방하다!

 

이 외에도 SEO, SSR, CSS의 부품화 등 React를 활용할 수 있는 방법들은 매우 다양하다. 처음부터 거대한 걸 만들기보다 작은 걸로 계속 규모를 조금씩 키워나가는 것을 추천한다. 처음부터 쓴 맛을 미리 맛보며 좌절감에 지치지 말자. 

 

 

5. 라이브러리 적용이 생각대로 안 된다면 최근 관련 issue가 있었는지 확인하자.

React의 출시 이후 지금과 같이 상용화 되기까지 그리 길지 않은 시간이 걸렸다. 지금까지도 조금씩 업데이트 되고 꾸준히 발전하고 있다. 프로젝트 진행 시 생각과 다른 문제가 발생하는 부분이 있다면 관련 구글링 또는 gitHub 히스토리 탐색을 통해 해답 또는 대안을 찾자.

 

 

 

공부 자료로는 아래 링크를 추천한다.

 

특히 최근 업로드 된 생활코딩 React-Redux 강의는 다른 여러 redux 관련 자료들을 보며 유목민처럼 헤매고 있을 때, 이렇게 쉽게 이해할 수 있다는 사실에 감탄하며 들었다. 늘 감사합니다... 갓고잉님..

 

Velopert 님 블로그 - 누구든지 하는 리액트:초심자를 위한 리액트 핵심 강좌
egoing 님의 opentutorial 생활코딩 강좌 - Redux / React-Redux
나동빈 님의 블로그 - Node.js를 통한 실습