728x90
- 리액트는 MVC 패턴중 오로지 View에만 관점을 두며, JavaScript 라이브러리중 하나이다
- 리액트는 데이터가 변할 때마다 기존 뷰를 날려버리고 처음부터 새로 랜더링 하는 방식이다
- 컴포넌트 : 특정 부분이 어떻게 생길지를 정하는 선언체
- 렌더링 : 사용자 화면에 뷰를 보여주는 것 (초기 렌더링, 리렌더링)
- 초기 랜더링 : render함수를 통해 초기 어떻게 보일지를 결정한다(render함수를 실행하게 되면 내부에 있는 컴포넌트 들도 재귀적으로 렌더링 된다)
- 리렌더링(조화과정) : render 함수를 통해 뷰를 새로 갈아 끼운다. 컴포넌트의 데이터가 업데이트 되었을 때 새로운 데이터를 가지고 render함수를 또 다시 호출하여 데이터를 지닌 뷰를 생성한다
- 대신에!! render가 반환하는 결과를 DOM에 곧바로 반영하는 것이 아니라 이전에 render함수가 만들었던 컴포넌트 정보와 현재 render함수가 만든 컴포넌트 정보를 비교하여 JavaScript 연산을 통해 둘의 차이를 알아내 최소한의 연산으로 DOM트리를 업데이트 한다.
리액트의 특징
- DOM 문제점 : 동적 UI에 최적화되어 있지 않다(큰 규모의 에플리 케이션에서의 DOM에 직접 접근하여 변화를 주다 보면 성능 이슈가 발생한다->느려짐, 웹브라우저가 CSS연산,레이아웃구성,페이지 리페인트등의 일을 다시해서)
- 해결 : DOM의 최소한으로 조작하여 작업을 진행한다.(Virtual DOM 방식 이용)
- Virtual DOM : 실제 DOM에 접근하여 조작하는 대신 추상화된 자바스크립트 객체를 구성하여 사용한다.
- DOM 업데이트 절차
- 데이터를 업데잍트 하면 전체 UI를 Virtual DOM 에 리렌더링
- 이전 Virtual DOM에 있던 내용과 현재 내용을 비교
- 바뀐 부분만 실제 DOM에 적용
기타 특징
리액트는 프레임워크가 아니라 라이브러리이다
기타기능(Ajax, 데이터 모델링, 라우팅 등) 기능들은 직접 구현해야된다 ->단, 다른 개발자들이 만들은 라이브러리를 쓰면 된다.
작업 환경 설정
사전 작업 : 1) Node.js/ npm,yarn 설치 2) 코드 에디터 설치 3) Git설치 4) Create-react-app로 프로젝트 만들기
- Node.js와 npm
- 리액트를 하기 위해서는 node.js를 먼저 설치 해야된다(자바스크립트 엔진으로 빌드한 자바스크립트 런타임)
- 웹 브라우저 환경이 아닌 곳에서도 자바스크립트 연산을 할수있다.
- 프로젝트를 개발하는 데 필요한 주요 도구가 Node.js를 사용하기 때문에 설치
- 설치하기
- Node.js 공식 내려받기 페이지에서 window Installer를 내려받아 설치
- 설치 완료 시 node -v 명령어를 통해 확인
- https://nodejs.org/ko/
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
- yarn 설치
- Node.js를 설치하게 되면 패키지를 관리해 주는 npm이 같이 설치가 되는데 npm대신 yarn 패키지 관리자 도구를 이용해서 진행(npm보다 빠르며 효율적인 캐시 시스템과 부가 기능 제공)
- 설치하기
- yarn 내려받기 페이지에서 download installer버튼을 눌러 설치프로그램 내려받고 실행
- yarn --version으로 확인
- https://classic.yarnpkg.com/en/docs/install#windows-stable
Yarn
Fast, reliable, and secure dependency management.
classic.yarnpkg.com
- EDIT 설치
- VS code로 진행
- 확장 프로그램을 설치 해야된다
- ESLint : 자바스크립트 문법 및 코드 스타일 검사도구
- Reactjs Code Snippets : 리액트 컴포넌트 및 라이프사이클 함수를 작성 시 단축 단어를 사용하여 코드를 간편하게 자동생성 도구(charalampos karypidis)
- Prettier-code formatter : 코드 스타일을 자동으로 정리해 주는 도구
- Korean Language Pack for Visual Studio Code : 한국어 변경 도구(f1 -> configure display language 입력후 enter -> locale.json파일 열리면 locale을 ko로 설정뒤 vscode 재시작)
- https://code.visualstudio.com/download
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
- GIT 설치
- 형상 관리 도구 , 프로젝트 버전을 관리하고 협업 시스템에 용이
- https://git-scm.com/download/win
Git - Downloading Package
Downloading Git Now What? Now that you have downloaded Git, it's time to start using it.
git-scm.com
- Create-react-app로 프로젝트 생성
- 리액트 프로젝트를 생성할 때 웹팩, 바벨의 설치 및 설정 과정을 생략하고 간편하게 프로젝트 작업 환경을 구축해 주는 도구
- 터미널 open -> 디렉토리 이동 -> yarn create react-app hello-react(yarn create react-app 프로젝트명)
- 해당 프로젝트 이동 후(cd hello-react) yarn start 실행
- http://localhost:3000 접속
728x90