소개

인프런에서 김정환님의 실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발강의를 보고 해당 강좌의 내용을 리액트 소스코드로 재구성해봤습니다. 기초적인 리액트 앱이며 Live Demo요구사항 분석을 참조해주세요.

시작

이번에 프론트엔드 개발로 취업준비를 하면서 리액트는 필수인 것 같았다. (우대가 아닌 자격조건! 👿) 지금까지 리액트를 왜 안했지 라며.. 나를 원망하며(?) 인프런에서 김민준님 강의를 빠르게 완강하였고, 예전에 완강하였던 김정환님의 Vue.js강의 예제와 요구조건이 생각나여 리액트로 재구성해보았다.

준비

예제가 간단하여 create-react-app을 사용하여 프로젝트를 하기 보단 코드샌드박스에서 간단히 만들어 볼 생각이었다. 그리고 리액트, 무엇보다 자바스크립트 언어에 대한 준비도 필요하다.

학습

리액트로 처음 소스코드 짜보기

일단 키보드에 손을 올리긴 했는데, 다른 언어로 코딩을 할때와 다르게 생각한대로 코드를 어떻게 써야할 지 모르겠다.😅 그래서 우선 React를 import 하고 class를 만들기 시작했다. 처음 느낌은 또 자바스크립트를 MVC패턴으로 구현하는 것과 다를게 없다는 생각이었다.

  • 자바스크립트의 class를 사용하고, Component의 메소드를 상속받음 (render()나 라이프사이클 API)
  • 내부 메소드에서 this를 쓰면 윈도우 객체를 참조하기 때문에 this를 사용하고 싶으면 화살표함수로 하면 됨
  • 자바스크립트의 모듈시스템 (import, export)
  • 데이터의 주입 및 방출(props로 자식컴포넌트에 데이터를 주입하고, 상위 컴포넌트의 콜백함수로 데이터를 방출하는 것)

등등.. 바닐라 자바스크립트로 개발하는 느낌이 들었다. 🙄

리액트로 프로젝트 완성

리액트로 작은 프로젝트를 완성하였다. 다 완성하고 보니 리액트만의 특별한 점? 이 눈에 들어왔다.

  • 리액트에는 가상돔이 있다. (JSX라는 문법으로 가상의 돔을 만들어 이전 DOM과 비교 후 실제 DOM에 랜더링 하는 점)
  • 조건 부 랜더링, 스타일 or 프로퍼티의 값도 모두 자바스크립트로! (개발자의 자유도가 높아졌다는 느낌 😃)
  • 데이터를 변경하고 관리하는 것에만 집중할 수 있다는 느낌 (상태변화로 UI가 변경)

또 리액트에서 기초 핵심적인 부분도 정리해 본다.

  • Component 디자인(설계)
  • JSX 문법
  • props와 state
  • Component Lifecycle API

Vue.js와의 느낌

Vue.js와 완전히 똑같다는 생각이다. 그래서 jQuery에서 Vue.js를 접했을 때보다 Vue.js에서 리액트를 처음 접했을 때 훨씬 빠르게 와 닿았다. (당연한 🐕소리를,,,) 처음에는 내가 사용하기에 Vue.js가 더 좋은 것 같은 느낌이었는데 지금은 React.js가 개발하면서 훨씬 와닿고 좋은 느낌이다.

  • Vue.js에는 template이라는 것이 있고, 정해진 v-directive로 랜더링을 컨트롤한다. React.js는 자바스크립트로 컨트롤한다. (Vue.js는 협업에 React.js는 개발자가 사용하기에 좋은 것 같음)
  • Vue.js의 경우 추상적인 반면 React.js의 경우 명확한 느낌이다. (state와 setState로 값을 변경, 가상 DOM, 메소드의 선언 등등에서 받은 지극히 개인적인 느낌👿) 라이브러리와 프레임워크의 차이일까요?

마무리

역시 여러 가지 경험이 눈을 뜨게 해주는 것 같다. 무엇보다 React를 공부하고 나니 Vue가 더 명확하게 보여 더 좋은 느낌이다. 앞으로는 취업을 위해 여러 강의와 여러 문서들을 보며 앞으로 리액트 개발에 더 시간을 쏟아야 겠다.
이벤트 관련하여 리액트로 delegation 패턴을 처리하는 방법을 구글에 검색해보니 많은 결과가 나와서 좋았다. 컴포넌트의 상태를 중앙에서 관리할 수 있다는 Vuex와 비슷한 Redux에 대해서도 공부해야 겠고, React-native와 여러 많은 리액트 관련 내용을 공부하면서 자바스크립트 ES6에 대해 더 익숙해 질 수 있도록 노력해야 겠다.😃