이 문서는 r20240101판에서 저장되지 않은 문서입니다.
자동으로 r20200302판 문서를 읽어왔습니다.
자동으로 r20200302판 문서를 읽어왔습니다.
React (프레임워크)
덤프버전 : r20200302
분류
1. 개요[편집]
유저 인터페이스를 만드는 데 사용되는 오픈 소스 라이브러리. 페이스북에서 개발하였다. 프론트엔드 개발자 사이에서 AngularJS, Vue.js와 더불어 많은 인기를 얻고 있다. 참고로 Github Star 수는 Vue가 가장 많으며, npm package 수는 react가 가장 많다.
2. 예시[편집]
import React from 'react';
import ReactDOM from 'react-dom';
//"Hello, 홍길동!"을 출력하는 코드
const App = ({name}) => <h1>Hello, {name}!</h1> //함수형 문법
class App extends React.Component { //클래스형 문법
render() {
return (
<h1>Hello, {this.props.name}!</h1>
)
}
}
ReactDOM.render(<App name="홍길동" />, document.getElementById('root'));
해당 코드는 최신 브라우저에서 막 지원하기 시작한 import문과, JS 표준 문법이 아닌 JSX를 사용했기 때문에 이 코드가 그대로 브라우저상에 작동되는 것은 아니다. Babel을 통해 대부분의 브라우저가 사용할 수 있는 JS 코드로 변환한 후 사용할 수 있다.
3. Virtual DOM[편집]
데이터가 변경될 시 브라우저가 직접 DOM을 해석하고 변경사항을 적용하는 기존과 달리, React는 변경사항이 적용된 VirtualDOM을 만든다. 그 다음 실제 DOM과 VirtualDOM의 차이점을 비교하고, 변경된 부분을 실제 DOM에 적용한다. 보여지는 데이터의 잦은 변경이 필요한 웹앱의 경우 이러한 방식이 퍼포먼스를 올리는 데 도움이 된다. 데이터가 자주 변경되지 않는 비교적 정적인 웹 페이지에 이를 적용할 경우 오히려 성능면에서 손해를 볼 수 있다.
4. JSX[편집]
const element = <h1>Hello, world!</h1>;
JavaScript eXtension
React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어와 매우 흡사한데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다.
HTML과 매우 흡사하긴 하지만, Javascript 내부에서 사용하다보니 불가피하게 생긴 차이점이 몇가지 있다.
- HTML요소에 class값을 정의할 때, 원래 HTML에서는
과 같이 하면 되었지만, class라는 단어가 ECMAScript6의 클래스 문법과 겹치는 예약어이기 때문에 대신에 className이라는 단어를 사용한다. - 마찬가지 이유로 루프문 예약어와 겹치는 for은 htmlFor로 사용한다.
- 또한 요소에서 이벤트를 핸들링하는 onclick 등의 단어들은 onClick처럼 카멜표기법으로 표기해야 한다.
- 기존의 HTML에서 주석은
이렇게 했었지만 JSX에서는
으로 표현한다.{/*주석*/} - HTML Custom-Element는
와 같이 표기했지만 React의 Custom Element는
와 같이 Pascal Case로 표기한다. 닫는 태그에는 꼭 명시적으로 /> 표기를 해준다. - JSX 내부에서도 JS를 사용할 수 있다. {}로 불러온다.
같은 식이다.{console.log(this.props)}
5. React Native[편집]
5.1. 개요[편집]
React의 문법으로 안드로이드/iOS 앱을 개발할 수 있는 프레임워크이다. React를 배웠던 개발자라면 몇시간만에 익숙해질 수 있을만큼 React와 거의 유사한 문법을 가지고 있으며, 실제로 차이나는 부분은 브라우저의 HTML Element를 사용하는 것이 아니라 View, Text 등의 자체 태그를 사용하는점과 CSS를 사용하지 않고 오직
CreateStyleSheet5.2. 지원 플랫폼[편집]
공식 지원 플랫폼
비공식 지원
거의 모든(Windows Phone을 제외한) 플랫폼을 지원한다.
5.3. 다른 프레임워크와의 비교[편집]
Flutter는 React Native와 비슷한 성격을 가지고 있으나 개발자나 패키지의 수 측면에서는 아직 React Native와 직접적으로 대적하기는 어려운 상황이다. 또한 Xamarin과 비교했을 때도 모든 부분에서 우위를 차지하고 있다. 구글 트렌드 검색 결과에 의하면 Xamarin은 오히려 하락하는 추세이고, React Native는 꾸준한 인기를 유지하고 있다.