새싹 프론트엔드

[새싹 프론트엔드] 11/24 (React 시작하기)

sognociel 2022. 11. 24. 09:48

01. React란?

페이스북이 만든 사용자 UI 구축을 위한 라이브러리

 

특징

  • Component 기반
  • Virtual DOM(가상 돔) 사용
  • JSX 문법 사용

 

 

프레임워크 vs 라이브러리

공통점 | 코드의 재사용

차이점 | 제어의 흐름 권한이 어디에 있는가?

  • 프레임워크 (내 코드의 주인은 따로 있다!)
    일정한 형태와 기능을 갖추고 있는 골격 또는 뼈대를 의미
    개발 시 필수적인 기능을 제공하며 개발자는 프레임워크가 정해준 방식을 따라야 함
    Angular, Vue.js, Spring, Django 등
  • 라이브러리 (내 코드의 주인은 나다!)
    특정 기능을 구현하기 위해 미리 만들어진 코드 또는 함수의 집합
    React, jQuery, tensorflow, pandas 등

 

 

Component 기반

  • 사용자가 정의한 태그를 의미
  • 코드를 기능별로 나눠서 작성
  • 빠르고 효율적인 화면 구성 가능
  • 코드의 재사용성 및 유지보수가 편리

 

 

Virtual DOM 사용

빠른 화면 출력 속도 -> 왜 빠른 화면 출력일까?

Web의 복잡도가 점차 증가했고 DOM 조작이 점점 빈번하게 일어나게 되었습니다. 브라우저 렌더 과정 에 따라 DOM의 조작은 브라우저 렌더 과정을 유발합니다. (렌더 트리 생성, 페인트 등등) 그러니까 3000번의 변화가 생기면 렌더도 3000번 진행한다는 거죠.

DOM 조작이 많이 발생할 경우, 이는 상당히 비효율적입니다. Virtual DOM 은 이런 상황을 해결하기 위해 탄생했습니다.

Virtual DOM은 하나의 가상 레이어입니다. Virtual DOM에 적용하는 변경사항은 DOM에 바로 반영되지 않습니다. 다만 그 변경사항들을 모아뒀다가, 한 번에 DOM한테 보냅니다. 그러면 DOM은 업데이트를 딱 한 번만 하면 되고, 그러면 렌더도 한 번만 하면 되는 거죠. DOM에 들어온 조작은 딱 한 번이니까요! 따라서 DOM 조작이 아주 빈번할 경우 Virtual DOM은 DOM을 조작하는 것에 비해 효율적으로 동작합니다.

출처 : https://velog.io/@woohm402/virtual-dom-and-react

 

cf.) jQuery를 이용한 화면 구성

간결한 코드로 화면 구성이 가능하지만, 화면의 일부분만 수정되어도 화면 전체를 다시 그려야 함

 

 

JSX 문법 사용

자바스크립트 안에서 HTML 문법을 사용하여 view를 구성할 수 있도록 도와주는 문법 

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

 

 

02. React 개발 환경 구축 및 프로젝트 생성

기존에 작성한 블로그 글 참고

https://sogno-study.tistory.com/40

$ npx create-react-app 프로젝트이름
$ npm start

 

 

 

03. 유용한 플러그인

rafce를 입력하면 코드를 자동 생성해 준다

또는 reactjs code snippets도 하나의 플러그인인데, rsc로 코드 자동 생성이 가능하다.

 

React Developer Tools

사이트가 리액트로 만들어졌는지 검사하는 기능 등을 포함한 크롬 확장 프로그램

 

 

 

'새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 6주차 블로그 포스팅'

저작자표시