React란?

React with Typescript 세미나 강의를 듣고 정리하며 공유한다.

React는 페이스북이 만든, MVC 패턴 중V를 담당하는 라이브러리

M이나C는 다른 라이브러리나 패키지로 보완해주어야 한다.

(Redux나MobX, react-router와 함께 프레임워크처럼 사용)

Angular는프레임워크React는UI구성요소라이브러리

UI 컴포넌트를 만드는 일만 하며 캡슐화를 잘 시켜줘서 재사용 성이 높다.

한가지 일만하여 단순하고 여러 자바스크립트 프레임워크나 라이브러리와 함께 사용할 수 있다

 

Angular는 금융권, React는 엔터테인먼트분야 라고 확정 지을 수는 없지만 

지표가 있다.

angular vs react 비교 

(Angular는 프로젝트도 해지만 React는 스터디만 해서 잘은 모르겠지만 비교를 떠나 둘다 괜찮은 프레임워크와 라이브러리임은 확실함)

컴포넌트 시스템을 구현했기 때문에 매우 효율적으로 코딩할 수 있습니다. 

 

리액트의작업단위는Component이다.

React는 Virtual DOM을 사용한다. 

Virtual DOM을 제대로 설명하기는 어려운데

기존 브로우저가 HTML을 전달받아 렌더링할때에는 DOM Tree를 만들어 

HTML의 엘리먼트들을 메모리에 값을 저장한다.

하지만 DOM에 변화가 생기면 렌더링과정을 다시 해 비효율적인 프로세스가 진행되는데 React는 Virtual DOM을 도입해 실제 DOM에 적용되기 전에 

Virtual DOM에 적용 후에 최종적으로 결과를 실제 DOM에 적용한다.

자세한 설명은 아래 참고

이동1, 이동2

React는JSX(JavaScript XML) 라는문법을사용한다. 

 

JSX.Element로그려질컴포넌트를표현

React.createElement 함수를통해서도JSX.Element를만들수있다.

위에는JSX 문법을사용

밑에는React.createElement를사용해서JSX엘리먼트생성

나중에 좀 더 리엑트를 알게되면 다시 정리해야겠다.

2016년까지react15 => 2017년 react 16이 되면서 변경점이 있음 (이동)

출처 및 참고: https://www.inflearn.com/course/react-with-typescript/

https://github.com/FEDevelopers/tech.description/wiki/가상-돔과-돔의-차이점

https://velopert.com/3236