React & JSX (Java Script XML)

• 메타에서 개발한 오픈 소스 자바스크립트 라이브러리.
• 프론트엔드 개발자 사이에서 AngularJS, Vue.js와 더불어 많은 인기를 얻고 있다. GitHub Star 수와 npm 패키지 다운로드 수는 React가 가장 많다.
• SPA을 전제로 하고 있으며, Dirty checking과 Virtual DOM을 활용하여 업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는게 가능하다.
• 기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로 떠올랐다.
• 거기에 기본적으로 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하며, React Hooks라는 강력한 메소드들을 지원하면서 사실상 웹 프론트엔드 개발의 표준으로 자리잡았다.
• 이와 더불어 타입스크립트나 Sass 같은 언어도 지원한다.
• 또한 Next.js 등의 등장으로 인해 SSG, SSR등을 할 수 있게 되면서 사용 범위 또한 기하급수적으로 늘어났다.

---

JSX (Java Script XML)

• React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능
• HTML과 매우 흡사하긴 하지만, XML을 기반으로 한데다 Javascript 내부에서 사용하다보니 불가피하게 생긴 차이점이 몇가지 있다.
  • HTML요소에 class값을 정의할 때, 원래 HTML에서는 <p class="container"></p>과 같이 하면 되었지만, class라는 단어가 ECMAScript6의 클래스 문법과 겹치는 예약어이기 때문에 대신에 className이라는 단어를 사용
  • 마찬가지 이유로 루프문 예약어와 겹치는 for은 htmlFor로 사용
  • 요소에서 이벤트를 핸들링하는 단어들은 onClick처럼 카멜표기법으로 표기
  • JSX에서는 {/주석/} 으로 표현
  • HTML Custom-Element는 <my-element>와 같이 표기했지만 React의 Custom Element는 <MyElement />와 같이 Pascal Case로 표기
  • 닫는 태그에는 꼭 명시적으로 /> 표기
  • JSX 내부에서도 JS를 사용할 수 있음 - {}로 불러온다. ({console.log(this.props)} 같은 식)
• 이 JSX 위주의 프론트엔드 라이브러리로는 Preact, SolidJS, Inferno 등이 있으며, Vue.js 등의 자체적인 포멧을 사용하거나 Svelte 같이 JSX 사용과 거리가 먼 라이브러리 및 프레임워크 또한 JSX를 사용할 수 있는 방법이 존재
• 어도비의 Photoshop, After Effects등의 프로그램에서 쓰이는 스크립트의 확장자명도 jsx이지만 이 jsx와는 자바스크립트라는 것 이외의 관련 X

개발환경 구축은 npx나 yarn 중에서 선택