2_React에 대한 기본이해 - JavaScript

React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리 입니다.

따라서 JavaScript의 기본 개념들은 알고 넘어가야겠죠.

---

JavaScript(JS)란?

일반적으로 웹 페이지 동작을 제어하는데 널리 사용되는 언어입니다.

브라우저에 내장된 API(Application Programming Interface - 웹 브라우저에서 동작하는 코드 기능들)로

HTML을 동적으로 생성하고, CSS 스타일을 설정하거나, 사용자의 웹캠으로부터 비디오 스트림을 수집 및 조작,

3D 그래픽이나 오디오 샘플을 생성하는 등 다양한 기능을 할 수 있습니다.

 

또한, 다른 컨텐츠 공급사로 부터 제공되는 제 3자 API(third-party API)를 활용해 자신의 사이트에 통합이 가능합니다.

React라는 것이 바로 third-party API로 보면 될 것 같네요.

---

그럼 다시, React로 돌아와서...

JS의 일종이라면, 기존 JS를 쓰면되지, 왜 React를 쓸까요?

뭔가 더 향상된 기능을 제공하기 때문이겠죠. 다음과 같이 말합니다.

What Is React Good For? 1. Repeatable, resusable UI elements. 2. Displaying any data that changes over time. 3. Apps and sites built entirely with JavaScript.

React는

브라우저의 경우 ReactDOM에서, 서버의 경우 ReactDOMServer에서, 

Native App의 경우 React Native에서 동작하게 됩니다. 

---

React 문법은 JSX라 하여, 아래와 같이 문자열도, HTML도 아닌 희안한 문법을 사용하는데,

JS를 확장한 문법입니다.

 

JSX에서는 element를 생성하는데, 이 것을 다른 표현으로 React를 생성한다고 합니다.

React의 문법은 다음과 같이 작성됩니다.

 

프로그램이 동작하는 전체적인 흐름이 직관적으로 파악 가능한 구조의 문법이 아닐까 생각됩니다.

 

오늘은 여기까지...

 

 

기초정리 : DOM이란?

DOM(The Document Object Model)은 '문서 객체 모델'이라고 하여  구조화된 nodes, property, method를 갖고있는 objects입니다.   프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여, 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경 할 수 있게 도와줍니다.    웹 페이지는 일종의 문서(document)이며, 이러한 콘텐츠는 DOM에 저장되고, 자바스크립트를 통해 접근하거나 조작이 가능합니다.     API(web or XML page) = DOM + JS

 

 

자료출처

https://ko.reactjs.org/docs/hello-world.html

https://developer.mozilla.org/ko/docs/Web/JavaScript/About

https://www.linkedin.com/learning/react-for-web-designers-2018/what-is-react-and-what-is-it-good-for

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C

https://codepen.io/pen?&editable=true&editors=0010