리액트: 두 판 사이의 차이

2020년 11월 25일 (수) 15:11 판

React.

페이스북이 만든 자바스크립트 프레임워크. 싱글 페이지 애플리케이션을 편리하게 만들 수 있으며, 웹 개발 가운데 뷰(view) 부분에 집중하고 있다.

JSX

HTML 태그를 아주 쉽게 코드 안에 넣을 수 있다. 대다수 자바스크립트 프레임워크는 뷰 부분은 HTML 파일로 작성하고 이를 조작하는 부분은 자바스크립트 파일로 만들어서 두 파일을 연결하는 식으로 구현하는데, 리액트는 그냥 자바스크립트 안에 HTML까지 다 써넣어서 해결한다. 대신 HTML과 완전히 똑같지 않은 부분이 있다.

HTML 태그의 class 속성은 JSX에서는 className으로 해야 한다. 이는 class가 자바스크립트 키워드이기 때문이다.
HTML 태그의 이벤트 트리거는 카멜 표기법으로 써야 한다. 예를 들어 HTML의 onclick은 JSX에서는 onClick으로 써야 한다.

가상 DOM

DOM을 직접 업데이트하는 것은 시스템 자원이 많이 드는 일인데, 프로그래머가 직접 DOM을 건드리지 않고 리액트의 가상 DOM을 업데이트하면 리액트가 가장 최적화된 성능으로 DOM을 업데이트해 준다.

리액트 네이티브

리액트를 활용한 크로스 플랫폼 프레임워크. 안드로이드와 iOS 앱을 같은 코드로 만들 수 있으며 윈도우, 맥으로 범위를 넓혀 나가고 있다. 리액트를 쓸 줄 아는 프로그래머라면 쉽게 적응할 수 있다. 다른 프레임워크보다 늦게 시작했지만 빠르게 시장 점유율을 늘려나가고 있어서 아파치 코르도바나 자마린은 넘어선 상태다. 페이스북에서 만든 프레임워크인만큼 페이스북이 열심히 활용하고 있다. 당연히 페이스북과 인스타그램은 리액트 네이티브로 만들고 있으며 핀터레스트, 스카이프, 디스코드, 우버이츠와 같은 인기 있는 앱도 리액트 네이티브를 쓰고 있다. 현재 시장에서는 구글의 Flutter가 가장 강력한 라이벌이라고 할 수 있다.

@@ 5번째 줄: / 5번째 줄: @@
 ==JSX==
-[[HTML]] 태그를 아주 쉽게 코드 안에 넣을 수 있다. 대다수 [[자바스크립트]] [[프레임워크]]는 뷰 부분은 HTML로 작성하고 이를 조작하는 부분은 [[자바스크립트]]로 만들어서 연결하는데, 리액트는 그냥 [[자바스크립트]] 안에 다 써넣는다. 대신 [[HTML]]과 완전히 똑같지 않은 부분이 있다.
+[[HTML]] 태그를 아주 쉽게 코드 안에 넣을 수 있다. 대다수 [[자바스크립트]] [[프레임워크]]는 뷰 부분은 [[HTML]] 파일로 작성하고 이를 조작하는 부분은 [[자바스크립트]] 파일로 만들어서 두 파일을 연결하는 식으로 구현하는데, 리액트는 그냥 [[자바스크립트]] 안에 [[HTML]]까지 다 써넣어서 해결한다. 대신 [[HTML]]과 완전히 똑같지 않은 부분이 있다.
 * [[HTML]] 태그의 class 속성은 JSX에서는 className으로 해야 한다. 이는 class가 [[자바스크립트]] 키워드이기 때문이다.
-* [[HTML]] 태그의 이벤트 트리거는 카멜백 방식으로 써야 한다. 예를 들어 [[HTML]]의 onclick은 JSX에서는 onClick으로 써야 한다.
+* [[HTML]] 태그의 이벤트 트리거는 [[카멜 표기법]]으로 써야 한다. 예를 들어 [[HTML]]의 onclick은 JSX에서는 onClick으로 써야 한다.
 ==가상 DOM==