리액트: 두 판 사이의 차이
편집 요약 없음 |
|||
| (같은 사용자의 중간 판 9개는 보이지 않습니다) | |||
| 1번째 줄: | 1번째 줄: | ||
React. | React. | ||
[[페이스북]]이 만든 [[자바스크립트]] [[ | [[페이스북]]이 만든 [[자바스크립트]] [[라이브러리]]. [[싱글 페이지 애플리케이션]]을 편리하게 만들 수 있으며, 웹 개발 가운데 뷰(view) 부분에 집중하고 있다. | ||
==JSX== | ==JSX== | ||
[[HTML]] 태그를 아주 쉽게 코드 안에 넣을 수 있다. 대다수 [[자바스크립트]] [[프레임워크]]는 뷰 부분은 | [[HTML]] 태그를 아주 쉽게 코드 안에 넣을 수 있다. 대다수 [[자바스크립트]] [[프레임워크]] 또는 [[라이브러리]]는 뷰 부분은 [[HTML]] 파일로 작성하고 이를 조작하는 부분은 [[자바스크립트]] 파일로 만들어서 두 파일을 연결하는 식으로 구현하는데, 리액트는 그냥 [[자바스크립트]] 안에 [[HTML]]까지 다 써넣어서 해결할 수 있다. [[자바스크립트]] 안에 [[HTML]] 코드를 쓸 때에는 따옴표를 이스케이프 처리를 하거나 여러 가지 귀찮은 처리를 해야 하는데 JSX는 거의 그럴 필요가 없이 [[HTML]] 코드를 직접 쓰는 느낌에 거의 가깝게 사용할 수 있다. 대신 어쨌거나 [[자바스크립트]] 코드의 일부이기 때문에 [[HTML]]과 완전히 똑같지 않은 부분이 있다. | ||
* [[HTML]] 태그의 class 속성은 JSX에서는 className으로 해야 한다. 이는 class가 [[자바스크립트]] 키워드이기 때문이다. | * [[HTML]] 태그의 class 속성은 JSX에서는 className으로 해야 한다. 이는 class가 [[자바스크립트]] 키워드이기 때문이다. | ||
* [[HTML]] 태그의 이벤트 트리거는 | * [[HTML]] 태그의 이벤트 트리거는 [[카멜 표기법]]으로 써야 한다. 예를 들어 [[HTML]]의 onclick은 JSX에서는 onClick으로 써야 한다. | ||
==가상 DOM== | ==가상 DOM== | ||
[[DOM]]을 직접 업데이트하는 것은 시스템 자원이 많이 | [[DOM]]을 직접 업데이트하는 것은 시스템 자원이 많이 든다. DOM의 요소를 하나 바꿀 때마다 전체 DOM 트리를 다시 만들고 렌더링해야 하기 때문이다. 리액트는 프로그래머가 직접 [[DOM]]을 건드리지 않고 리액트의 가상 [[DOM]]을 업데이트도록 하고, 마지막으로 리액트가 가장 최적화된 성능으로 실제의 [[DOM]]을 업데이트해 준다. 예를 들어 어떤 상태를 업데이트하고, 이 상태에 영향을 받아서 내용을 업데이트하는 컴포넌트가 여러 개 있다고 가정하자. 각 컴포넌트가 한 번씩 DOM을 직접 건드리면 렌더링이 적어도 세 번은 다시 일어날 것이다. 리액트는 먼저 컴포넌트들이 가상 [[DOM]]을 업데이트 하도록 하고, 이들 업데이트가 동시에 이루어졌다면 실제 [[DOM]]에 한꺼번에 반영하는 식으로, 즉 렌더링이 한 번만 일어나도록 하는 방식으로 성능을 최적화할 수 있다. [[Angular]], [[Vue.js]]도 이와 같은 방법을 채택했다. | ||
==리액트 네이티브== | ==리액트 네이티브== | ||
리액트를 활용한 | 리액트를 활용한 [[크로스 플랫폼]] [[프레임워크]]<ref>웹 애플리케이션의 뷰 부문만을 다루는 라이브러리인 리액트와는 달리 리액트 네이티브는 이것으로 하나의 응용프로그램을 만들 수 있는 [[프레임워크]]다.</ref>. [[안드로이드]]와 [[iOS]] 앱을 같은 코드로 만들 수 있으며 [[윈도우]], [[맥]]으로 범위를 넓혀 나가고 있다. 리액트를 쓸 줄 아는 프로그래머라면 쉽게 적응할 수 있다. 리액트 경험이 없더라도 [[자바스크립트]] 개발자라면 역시 진입장벽이 낮은 편. 기존의 자바스크립트 기반 [[크로스 플랫폼]] [[프레임워크]]들이 대부분 웹앱 방식으로 구동한 것에 비해 리액트 네이티브는 '네이티브'라는 말처럼 각 운영체제별 네이티브 인터페이스를 활용하기 때문에 속도는 웹앱 방식보다 빠른 편이다. 다만 그에 따라 인터페이스의 미묘한 차이는 좀더 크게 나타난다. | ||
출시 이후에 리액트의 잘 다져진 기반 위에서 빠르게 시장 점유율을 늘려나가고 있어서 [[아파치 코르도바]]나 [[자마린]]은 넘어선 상태다. [[페이스북]]에서 만든 [[프레임워크]]인만큼 페이스북이 열심히 활용하고 있다. 당연히 [[페이스북]]과 [[인스타그램]] 앱은 리액트 네이티브로 만들고 있으며 핀터레스트, [[스카이프]], [[디스코드]], 우버이츠와 같은 인기 있는 앱도 리액트 네이티브를 쓰고 있다. 현재 시장에서는 구글의 [[Flutter]]가 가장 강력한 라이벌이라고 할 수 있다. | |||
{{각주}} | |||
2021년 10월 13일 (수) 22:58 기준 최신판
React.
페이스북이 만든 자바스크립트 라이브러리. 싱글 페이지 애플리케이션을 편리하게 만들 수 있으며, 웹 개발 가운데 뷰(view) 부분에 집중하고 있다.
JSX
HTML 태그를 아주 쉽게 코드 안에 넣을 수 있다. 대다수 자바스크립트 프레임워크 또는 라이브러리는 뷰 부분은 HTML 파일로 작성하고 이를 조작하는 부분은 자바스크립트 파일로 만들어서 두 파일을 연결하는 식으로 구현하는데, 리액트는 그냥 자바스크립트 안에 HTML까지 다 써넣어서 해결할 수 있다. 자바스크립트 안에 HTML 코드를 쓸 때에는 따옴표를 이스케이프 처리를 하거나 여러 가지 귀찮은 처리를 해야 하는데 JSX는 거의 그럴 필요가 없이 HTML 코드를 직접 쓰는 느낌에 거의 가깝게 사용할 수 있다. 대신 어쨌거나 자바스크립트 코드의 일부이기 때문에 HTML과 완전히 똑같지 않은 부분이 있다.
- HTML 태그의 class 속성은 JSX에서는 className으로 해야 한다. 이는 class가 자바스크립트 키워드이기 때문이다.
- HTML 태그의 이벤트 트리거는 카멜 표기법으로 써야 한다. 예를 들어 HTML의 onclick은 JSX에서는 onClick으로 써야 한다.
가상 DOM
DOM을 직접 업데이트하는 것은 시스템 자원이 많이 든다. DOM의 요소를 하나 바꿀 때마다 전체 DOM 트리를 다시 만들고 렌더링해야 하기 때문이다. 리액트는 프로그래머가 직접 DOM을 건드리지 않고 리액트의 가상 DOM을 업데이트도록 하고, 마지막으로 리액트가 가장 최적화된 성능으로 실제의 DOM을 업데이트해 준다. 예를 들어 어떤 상태를 업데이트하고, 이 상태에 영향을 받아서 내용을 업데이트하는 컴포넌트가 여러 개 있다고 가정하자. 각 컴포넌트가 한 번씩 DOM을 직접 건드리면 렌더링이 적어도 세 번은 다시 일어날 것이다. 리액트는 먼저 컴포넌트들이 가상 DOM을 업데이트 하도록 하고, 이들 업데이트가 동시에 이루어졌다면 실제 DOM에 한꺼번에 반영하는 식으로, 즉 렌더링이 한 번만 일어나도록 하는 방식으로 성능을 최적화할 수 있다. Angular, Vue.js도 이와 같은 방법을 채택했다.
리액트 네이티브
리액트를 활용한 크로스 플랫폼 프레임워크[1]. 안드로이드와 iOS 앱을 같은 코드로 만들 수 있으며 윈도우, 맥으로 범위를 넓혀 나가고 있다. 리액트를 쓸 줄 아는 프로그래머라면 쉽게 적응할 수 있다. 리액트 경험이 없더라도 자바스크립트 개발자라면 역시 진입장벽이 낮은 편. 기존의 자바스크립트 기반 크로스 플랫폼 프레임워크들이 대부분 웹앱 방식으로 구동한 것에 비해 리액트 네이티브는 '네이티브'라는 말처럼 각 운영체제별 네이티브 인터페이스를 활용하기 때문에 속도는 웹앱 방식보다 빠른 편이다. 다만 그에 따라 인터페이스의 미묘한 차이는 좀더 크게 나타난다.
출시 이후에 리액트의 잘 다져진 기반 위에서 빠르게 시장 점유율을 늘려나가고 있어서 아파치 코르도바나 자마린은 넘어선 상태다. 페이스북에서 만든 프레임워크인만큼 페이스북이 열심히 활용하고 있다. 당연히 페이스북과 인스타그램 앱은 리액트 네이티브로 만들고 있으며 핀터레스트, 스카이프, 디스코드, 우버이츠와 같은 인기 있는 앱도 리액트 네이티브를 쓰고 있다. 현재 시장에서는 구글의 Flutter가 가장 강력한 라이벌이라고 할 수 있다.
