리액트: 두 판 사이의 차이

내위키
16번째 줄: 16번째 줄:
==리액트 네이티브==
==리액트 네이티브==


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

2020년 11월 25일 (수) 12:24 판

React.

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

JSX

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

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

가상 DOM

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

리액트 네이티브

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