🌟 React?

React는 Facebook에서 만든것으로 사용자 인터페이스(UI)를 만들기 위한 JavaScript의 library(ReactDOM)이다.

• 장점
  . 복잡한 업데이트를 다루지만 React에서 만들어진 App은 빠르다.
  . Code를 밀도있게 작성할 수 있으며, 파일을 재사용할 수 있다.
  . 확장성이 있어 데이터로 얽힌 프로그램을 수행하는데 최적의 도구이다.

🧐 개발 환경 Setting

• 기본 프로그램
  . Node.js : 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경
  프로젝트 개발 환경을 구축하는 주요 도구들이 Node.js 기반 (CRA, Babel, Webpack)
  . npm(node pakage manager): npm 을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있다.
  . CRA(Create React App) : 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구
  
  
• 구성 내용
  . node_modules: CRA를 구성하고 있는 pakage의 모음이다. 무거운 폴더이기 때문에 나중에 프로젝트를 git으로 관리할 때는gitignore로 무시한다.
  . pakage.json: dependencies › CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보의 기록 파일

😈 JSX?

JavaScript의 확장된 문법으로 React에서 사용되는 문법이다. JSX는 HTML과 비슷하게 생겼지만 웹 브라우저는 읽을 수 없다. 웹 브라우저가 JSX 코드를 읽기 위해서는 JSX compiler가 필요하다.

• 특징
  . Element를 변수로 저장할 수 있다.(JavaScript)
  . attribute를 가질 수 있다.(HTML)
  . 중접된 형태의 코드를 작성할 때는 ()로 element 요소를 감싸줘야 한다.

 const theExample = (
   <a href="https://www.example.com">
     <h1>
       Click me!
     </h1>
   </a>
 )

. element는 가장 바깥쪽에 무조건 1개의 element만 있도록 표현해야 한다. 의미있는 tag로 감쌀 필요가 없다면 <div>를 사용하거나 빈 tag:<>를 사용하거나 <React.Fragment>를 사용해도 좋다.

 const paragraphs = (
  <div id="i-am-the-outermost-element">
    <p>I am a paragraph.</p>
    <p>I, too, am a paragraph.</p>
  </div>
);

👻 ReactDOM

ReactDOM은 react library의 이름으로 이 library는 몇 가지 중요한 method를 가지고 있다.

• ReactDOM.render(): JSX를 생성하는 가장 흔한 method로 JSX 표현식을 DOM tree에 생성할 때 사용한다.

. render(element, container[, callback])
render안에 element는 JSX 표현식 또는 JSX 표현식이 담긴 변수,
container는 element가 append될 위치를 의미한다.

ReactDOM.render(<h1>Render me!</h1>, document.getElementById('app'));

👻 Virtual DOM(VDOM)

React는 요소들을 update할 때 virtual DOM을 전체적으로 update하고 이전의 DOM과 비교하여 바뀐 element만 파악해서 정확하게 ReactDOM을 변경한다. 이 프로세스를 "diffinig"이라고 한다.

[Update 과정]
1. Virtual DOM이 전체적으로 update 된다.(현재 update)
2. VDOM은 이전의 update 내용과 현재 update 내용을 비교한 뒤 변경된 부분을 확인한다.
3. 변경될 부분이 있는 object만 실제 DOM에서 update를 한다.
4. 실제 DOM의 변경된 내용만이 웹 페이지의 내용을 변경한다.