리액트 문서 원본 보기

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]]도 이와 같은 방법을 채택했다.

==리액트 네이티브==

리액트를 활용한 [[크로스 플랫폼]] [[프레임워크]]<ref>웹 애플리케이션의 뷰 부문만을 다루는 라이브러리인 리액트와는 달리 리액트 네이티브는 이것으로 하나의 응용프로그램을 만들 수 있는 [[프레임워크]]다.</ref>. [[안드로이드]]와 [[iOS]] 앱을 같은 코드로 만들 수 있으며 [[윈도우]], [[맥]]으로 범위를 넓혀 나가고 있다. 리액트를 쓸 줄 아는 프로그래머라면 쉽게 적응할 수 있다. 리액트 경험이 없더라도 [[자바스크립트]] 개발자라면 역시 진입장벽이 낮은 편. 기존의 자바스크립트 기반 [[크로스 플랫폼]] [[프레임워크]]들이 대부분 웹앱 방식으로 구동한 것에 비해 리액트 네이티브는 '네이티브'라는 말처럼 각 운영체제별 네이티브 인터페이스를 활용하기 때문에 속도는 웹앱 방식보다 빠른 편이다. 다만 그에 따라 인터페이스의 미묘한 차이는 좀더 크게 나타난다.

출시 이후에 리액트의 잘 다져진 기반 위에서 빠르게 시장 점유율을 늘려나가고 있어서 [[아파치 코르도바]]나 [[자마린]]은 넘어선 상태다. [[페이스북]]에서 만든 [[프레임워크]]인만큼 페이스북이 열심히 활용하고 있다. 당연히 [[페이스북]]과 [[인스타그램]] 앱은 리액트 네이티브로 만들고 있으며 핀터레스트, [[스카이프]], [[디스코드]], 우버이츠와 같은 인기 있는 앱도 리액트 네이티브를 쓰고 있다. 현재 시장에서는 구글의 [[Flutter]]가 가장 강력한 라이벌이라고 할 수 있다.

{{각주}}