react란

• 페이스북에서 사용자 경험을 향상하기 위해 만든 라이브러리
• 프레임워크가 아님 -> 사용자 인터페이스 라이브러리
  • framework과 library의 차이는? 프레임웤이라고 할 정도면 프로그램의 흐름의 주도권이 프레임웤에 있어서 기본 구조가 모두 구성되어 있고 개발자는 필요한 기능 구현에만 초점을 맞출 수 있도록 하는 수준이 되는 것...? 일반적으로 프레임웤>라이브러리 로 규모가 더 큰 걸 의미함, 근데 어디까지는 프레임웤이고 그 아래는 라이브러리다라고 무자르듯 구분하기 쉽지 않음
• HTTP 클라이언트, 라우터, 심화적 상태 관리 등의 기능들은 내장되어있지 않음 -> view단에 집중
  • 라우터: React-router, Next.js, After.js
  • 상태관리: Redux, MobX, fr(e)actal 
• virtual DOM을 사용한 성능향상 (Vue, Marko, Maquette, Mithril도 virtual DOM사용)
  • virtual DOM에 대한 자세한 설명 https://velopert.com/3236
  • 브라우저와 렌더링 엔진(크롬, 사파리는 웹킷, 파이어폭스는 게코라는 렌더링 엔진 사용)에 대해 좀 알아야 깊이 이해할 수 있음, 나중에 더 공부하는 걸로...
• 단방향 데이터 바인딩
• component를 사용한 생산성 증가 -> JSX 문법 사용
  • html, xml형태로 리턴하여 컴포넌트화, 실제로는 html이 아니라 이게 다 javascript 엄청나게 장황한 긴 코드로 변환이 됨 -> 바벨에 의해 React.createElement('div',...)로 바뀜
  • https://ko.reactjs.org/docs/introducing-jsx.html
  • jsx 사용법, jsx를 이용한 조건부 렌더링: https://velopert.com/3626

 

안녕, 리액트(Hello, React)

 

React 렌더링과 성능 알아보기 : NHN Cloud Meetup