[React] 리액트 개요, node.js와 npm, 렌더링Rendering, JSX

React 시작하기

개요

• 목적 : 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축
• 리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행합니다.
• virtual DOM 사용하여 js 객체를 구성, 실제 DOM의 가벼운 사본 느낌
• 업데이트 처리 간결성
• 프레임워크 X 라이브러리 O → 뷰 이외의 기능은 다른 라이브러리 사용 ex) react-router

Node.js, npm

• 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임
• 리액트는 웹브라우저에서 실행되어 직접 연관은 없으나, 프로젝트 개발에 필요한 주요도구가 Node.js를 사용
  • ECMAScript 6를 호환시켜 주는 바벨(babel)
  • 모듈화된 코드를 한 파일로 합치고(번들링) 코드를 수정할 때마다 웹 브라우저를 리로딩하는 등의 여러 기능을 지닌 웹팩(webpack)
• npm : Node.js 패키지 매니저 도구
• yarn : npm 대체 도구. 빠르고 효율적인 캐시 시스템과 부가기능 제공

추천 익스텐션

• ESLint
• Reactjs Code Snippets
• HTML end tag labels

create-react-app

• 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구

Rendering

• to represent something in a work of art or a performance to change words into a different language or form
• 렌더링: 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정
• 렌더링 엔진 작동 방식 : HTML, CSS 문서를 읽어내 실제 웹사이트의 모습을 그려내준다.
  1. 브라우저는 서버로부터 HTML 문서를 받고
  2. 렌더링 엔진이 HTML 파싱 → DOM 트리, 스타일 요소 파싱 → CSSOM 트리
  3. DOM과 CSSOM을 결합하여 렌더링 트리 형성
  4. ⁎ 화면에 드러나지 않는 head 태그나 display:none은 렌더링 트리에 포함 X
  5. 레이아웃/리플로우 : 기기의 뷰포트 내에서 노드들의 정확한 위치와 크기를 계산하는 과정
  6. 페인팅/래스터화 : 렌더링 엔진이 페인트 이벤트를 발생시켜 렌더링 트리를 화면에 그리는 과정
  7. 
• 1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
  2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
  3. 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
  4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
  5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
  6. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행.
  7. 자료 저장소 - 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.웹 브라우저 구성 요소
  8. 
• 렌더링 엔진 종류
  • 크롬, 엣지 : Blink 엔진
  • 익스플로러 : Trident
  • 사파리 : webkit
  • 파이어폭스 : gecko
• Light house / 크롬의 network 에서 렌더링 과정 확인 가능
• 참고 :
  • 브라우저의 작동 원리 : https://it-ist.tistory.com/110
  • https://velog.io/@ru_bryunak/렌더링이란
  • https://yozm.wishket.com/magazine/detail/646/
  • https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_browser_high_level_structure
  • https://d2.naver.com/helloworld/59361

Re-rendering in React

• observing virtual DOM and change the real DOM
• from virtual DOM to real DOM

JSX

모듈 불러와서 사용하기

import React from 'react';

• node_modules 디렉터리 내부에 설치된 react 모듈을 불러와서 사용한다.
• Node.js 에서 지원하는 기능으로 브라우저에서도 사용하기 위해 bundler(웹팩 등)을 사용한다.
• 웹팩의 loader : css-loader, file-loader, babel-loader
  • 바벨 : 최신 js 문법으로 작성된 코드를 ES5 문법으로 변환하는 도구 (for 구버전과의 호환)
    • JSX 또한 정식 자바 스크립트 문법 X

JSX

• 함수형 컴포넌트를 쓰는 자바스크립트의 확장 문법
• 바벨(from webpack)을 사용해 변환된다.
• 장점 : 가독성, 활용성
• 주의점
  1. 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다.
     • 예시

       import React, { Fragment } from 'react';
        
       function App() {
         return (
           <Fragment>
             내부 요소들
           </Fragment>
         );
       }
        
       export default App;
       

       import React from 'react';
        
       function App() {
         return (
           <>
             내부 요소들
           </>
         );
       }
        
       export default App;
       

     • import React from 'react'; function App() { return ( <div> 내부 요소들 </div> ); } export default App;
  2. JS 표현식 사용 시 { 변수 등 }
  3. if문 X, 조건부 연산자(삼항 연산자) O
  ( ~ 리다기 2.4.3 https://thebook.io/080203/ch02/04/04/ )