리액트: 두 판 사이의 차이
(→가상 DOM) |
(→가상 DOM) |
||
| 12번째 줄: | 12번째 줄: | ||
==가상 DOM== | ==가상 DOM== | ||
[[DOM]]을 직접 업데이트하는 것은 시스템 자원이 많이 드는 일인데, 프로그래머가 직접 [[DOM]]을 건드리지 않고 리액트의 가상 [[DOM]]을 업데이트하면 리액트가 가장 최적화된 성능으로 [[DOM]]을 업데이트해 준다. 예를 들어 어떤 상태를 업데이트하고, 이 상태에 영향을 받아서 내용을 업데이트하는 컴포넌트가 여러 개 있다고 가정하자. 각 컴포넌트가 제각각 DOM을 직접 건드리는 것은 자원이 많이 든다. 리액트는 먼저 컴포넌트들이 가상 [[DOM]]을 업데이트하도록 하고, 이들 업데이트가 동시에 이루어졌다면 실제 [[DOM]]에 한꺼번에 반영하는 식으로 성능을 최적화할 수 있다. | [[DOM]]을 직접 업데이트하는 것은 시스템 자원이 많이 드는 일인데, 프로그래머가 직접 [[DOM]]을 건드리지 않고 리액트의 가상 [[DOM]]을 업데이트하면 리액트가 가장 최적화된 성능으로 [[DOM]]을 업데이트해 준다. 예를 들어 어떤 상태를 업데이트하고, 이 상태에 영향을 받아서 내용을 업데이트하는 컴포넌트가 여러 개 있다고 가정하자. 각 컴포넌트가 제각각 DOM을 직접 건드리는 것은 자원이 많이 든다. 리액트는 먼저 컴포넌트들이 가상 [[DOM]]을 업데이트하도록 하고, 이들 업데이트가 동시에 이루어졌다면 실제 [[DOM]]에 한꺼번에 반영하는 식으로 성능을 최적화할 수 있다. [[Angular]], [[Vue.js]]도 이와 같은 방법을 채택했다. | ||
==리액트 네이티브== | ==리액트 네이티브== | ||
리액트를 활용한 [[크로스 플랫폼]] [[프레임워크]]. [[안드로이드]]와 [[iOS]] 앱을 같은 코드로 만들 수 있으며 [[윈도우]], [[맥]]으로 범위를 넓혀 나가고 있다. 리액트를 쓸 줄 아는 프로그래머라면 쉽게 적응할 수 있다. 다른 [[프레임워크]]보다 늦게 시작했지만 빠르게 시장 점유율을 늘려나가고 있어서 [[아파치 코르도바]]나 [[자마린]]은 넘어선 상태다. [[페이스북]]에서 만든 [[프레임워크]]인만큼 페이스북이 열심히 활용하고 있다. 당연히 [[페이스북]]과 [[인스타그램]]은 리액트 네이티브로 만들고 있으며 핀터레스트, [[스카이프]], [[디스코드]], 우버이츠와 같은 인기 있는 앱도 리액트 네이티브를 쓰고 있다. 현재 시장에서는 구글의 [[Flutter]]가 가장 강력한 라이벌이라고 할 수 있다. | 리액트를 활용한 [[크로스 플랫폼]] [[프레임워크]]. [[안드로이드]]와 [[iOS]] 앱을 같은 코드로 만들 수 있으며 [[윈도우]], [[맥]]으로 범위를 넓혀 나가고 있다. 리액트를 쓸 줄 아는 프로그래머라면 쉽게 적응할 수 있다. 다른 [[프레임워크]]보다 늦게 시작했지만 빠르게 시장 점유율을 늘려나가고 있어서 [[아파치 코르도바]]나 [[자마린]]은 넘어선 상태다. [[페이스북]]에서 만든 [[프레임워크]]인만큼 페이스북이 열심히 활용하고 있다. 당연히 [[페이스북]]과 [[인스타그램]]은 리액트 네이티브로 만들고 있으며 핀터레스트, [[스카이프]], [[디스코드]], 우버이츠와 같은 인기 있는 앱도 리액트 네이티브를 쓰고 있다. 현재 시장에서는 구글의 [[Flutter]]가 가장 강력한 라이벌이라고 할 수 있다. | ||
2020년 11월 27일 (금) 05:16 판
React.
페이스북이 만든 자바스크립트 프레임워크. 싱글 페이지 애플리케이션을 편리하게 만들 수 있으며, 웹 개발 가운데 뷰(view) 부분에 집중하고 있다.
JSX
HTML 태그를 아주 쉽게 코드 안에 넣을 수 있다. 대다수 자바스크립트 프레임워크는 뷰 부분은 HTML 파일로 작성하고 이를 조작하는 부분은 자바스크립트 파일로 만들어서 두 파일을 연결하는 식으로 구현하는데, 리액트는 그냥 자바스크립트 안에 HTML까지 다 써넣어서 해결한다. 대신 HTML과 완전히 똑같지 않은 부분이 있다.
- HTML 태그의 class 속성은 JSX에서는 className으로 해야 한다. 이는 class가 자바스크립트 키워드이기 때문이다.
- HTML 태그의 이벤트 트리거는 카멜 표기법으로 써야 한다. 예를 들어 HTML의 onclick은 JSX에서는 onClick으로 써야 한다.
가상 DOM
DOM을 직접 업데이트하는 것은 시스템 자원이 많이 드는 일인데, 프로그래머가 직접 DOM을 건드리지 않고 리액트의 가상 DOM을 업데이트하면 리액트가 가장 최적화된 성능으로 DOM을 업데이트해 준다. 예를 들어 어떤 상태를 업데이트하고, 이 상태에 영향을 받아서 내용을 업데이트하는 컴포넌트가 여러 개 있다고 가정하자. 각 컴포넌트가 제각각 DOM을 직접 건드리는 것은 자원이 많이 든다. 리액트는 먼저 컴포넌트들이 가상 DOM을 업데이트하도록 하고, 이들 업데이트가 동시에 이루어졌다면 실제 DOM에 한꺼번에 반영하는 식으로 성능을 최적화할 수 있다. Angular, Vue.js도 이와 같은 방법을 채택했다.
리액트 네이티브
리액트를 활용한 크로스 플랫폼 프레임워크. 안드로이드와 iOS 앱을 같은 코드로 만들 수 있으며 윈도우, 맥으로 범위를 넓혀 나가고 있다. 리액트를 쓸 줄 아는 프로그래머라면 쉽게 적응할 수 있다. 다른 프레임워크보다 늦게 시작했지만 빠르게 시장 점유율을 늘려나가고 있어서 아파치 코르도바나 자마린은 넘어선 상태다. 페이스북에서 만든 프레임워크인만큼 페이스북이 열심히 활용하고 있다. 당연히 페이스북과 인스타그램은 리액트 네이티브로 만들고 있으며 핀터레스트, 스카이프, 디스코드, 우버이츠와 같은 인기 있는 앱도 리액트 네이티브를 쓰고 있다. 현재 시장에서는 구글의 Flutter가 가장 강력한 라이벌이라고 할 수 있다.
