[React] React(리액트)?

 

[ React ]

React Logo

원저자	Jordan Walke
개발자	페이스북 및 공동체
발표일	2013-05-29
안정화 버전	18.3.1 / 2024-04-26
저장소	github.com/facebook/react
프로그래밍 언어	자바스크립트
플랫폼	크로스 플랫폼
종류	자바스크립트 라이브러리
라이선스	MIT 허가서
웹사이트	react.dev

리액트(React, React.js, ReactJS)는 자바스크립트 라이브러리의 하나로
사용자 인터페이스를 만들기 위해 사용된다
페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다

[ 역사 ]
리액트는 페이스북의 소포트웨어 엔지니어 Jordan Walke가 개발했다.
그는 PHP용 HTML컴포넌트 프레임워크인 XHP에 영향을 받았다
2011년 페이스북의 뉴스피드에 처음 적용되었다가
2012년 인스타그램닷컴에 적용되었다.
2013년05월 JSConf US에서 오픈소스화 되었다.

[ 가상DOM ]
다른 저명한 기능은 가상 문서 객체 모델, 즉 가상DOM의 사용이다.
리액트는 in-memory 데이터 구조 캐시를 만들고
결과차이를 계산한 다음 브라우저에 표시되는 DOM을 효과적으로 업데이트한다.
이로써 프로그래머는 마치 모든 페이지가 변경될때마다 렌더링되는 것처럼
코드를 작성할 수 있는데,
실제로 리액트 라이브러리는 단지 실제로 변경되는
하위 컴포넌트만을 렌더링할 뿐이다.

[ JSX ]
JSX(JavaScript XML)는 XML같은 문법을 사용하는
ECMAScript의 확장이다
HTML과 모습이 비슷해 보이는 JSX는
수많은 개발자들에게 친숙한 문법을 사용하여
컴포넌트 렌더링을 구조화하는 방법을 제공한다
리액트 컴포넌트들은 일반적으로 JSX를 사용하여 작성되지만
꼭 그렇게 할 필요는 없다(컴포넌트들은 순수 js로 작성할 수도 있다)
JSX는 PHP를 위해 페이스북이 개발한 다른 확장문법인 XHP와 유사하다

// JSX코드 예시
class App extends React.Component {
  render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}

[ 단순 HTML랜더링 그 이상의 아키텍처 ]
리액트의 기본구조는 웹브라우저에서 렌더링되는 HTML을 넘어서 적용된다.
이를테면 페이스북은 <canvas>태그에 렌더링하는 동적인 차트를 가지고 있으며
넷플릭스와 페이팔은 서버와 클라이언트쪽에 유사 HTML을 렌더링하기 위한
동일구조의 적재( isomorphic loading )을 사용한다

---

이 글은 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0에 따라
공개된 위키백과 문서 React의 자료를 사용