React
REACT
Why?
현대의 개발은 SPAs의 성격을 가지며, 인터랙티브한 기능을 사용자에게 제공한다. 다양하고 복잡한 요구사항을 수용할 수 있는 JavaScript 프로그래밍 개발을 해야한다. 규모있는 소스코드를 잘 관리하기 위해서, 체계적이고 일관된 구조 정책도 필요하다. 그러면서도 성능도 좋아야할 것이다.
SPAs Framework들은 이런 고민을 해결해주고 있다.
Framework? Library?
‘A JavaScript library for building user interfaces’
- React는 full features frameworks가 아니라 library에 가깝다.
- fetch, routing, state management를 기본으로 제공하지 않는다.
- React 는 View를 처리하는 역할에 집하고, 그외 필요한 모듈은 추가해서 사용해야 한다.
React
- 거대함을 벗어나 view 작업에 좀더 집중한다.
- view rendering의 동작과 성능은 개발자가 신경쓰지 않아도 된다.
- DOM 조작을 위해 template을 별도 분리하지 말고, UI컴포넌트 단위로 그 안에서 표현한다.
- HTML은 컴포넌트 별로 그때그때 만들자. 다만 HTML과 유사한 jsx문법을 사용.
- virtual DOM을 사용하여 DOM조작을 효율적으로 한다.
- Tree구조의 Virtual DOM을 계속 만들어 계속적인 비교를 통해 변경사항을 파악한다.
- 변경이 일어난 부분만 수정하는 등 DOM 변경 최소화를 통해 성능을 보장한다.
React와 ES2015+
- 당연히 모두 최신문법을 사용하기 때문에 잘 어울린다.
- ES Modules 방식의 모듈관리(import / export)를 한다.
- ES Classes 를 사용해서 컴포넌트를 개발한다.
- 최근에는 functional 프로그래밍 방식으로 변경 중이다.
- 최신 기능을 브라우저 호환성 걱정 없이 사용하기 위해서 babel과 같은 transpiling 필요.
React 학습을 위한 ES2015 Keyword
- const,let
- arrow function
- spread operator로 새로운 배열/객체 생성(Object.assign,concat메서드활용)
- destructuring
- default parameter
- template literal, tagged template literals
- funtional programming(foreach, map, filter, reduce, currying개념)
- ES classes
- ES modules