리액트
: 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 View만 신경쓰는 라이브러리
컴포넌트
: 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체
: 재사용이 가능한 API로 수많은 기능들을 내장
: 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의
렌더링
: 사용자 화면에 뷰를 보여 주는 것
리액트 특징 - Visual DOM
1. DOM이란?
Document Object Model의 약어 (= 객체로 문서 구조를 표현하는 방법, XML, HTML로 작성)
DOM의 문제점 : 동적 UI에 최적화 되어있지 X → 규모가 큰 웹 애플리케이션에서 DOM에 직접 접근하여 변화를 주다보면 성능 이슈 발생.
해결방법 : DOM을 최소한으로 조작하여 작업을 처리 → Virtual DOM
2. Virtual DOM
Virtual DOM 이란? 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용
리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트하는 과정
- 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링
- 이전 Virtual DOM에 있던 내용과 현재 내용을 비교
- 바뀐부분만 실제 DOM 에 적용
기타 특징
- 라이브러리가 많다
- 다른 웹 프레임워크나 라이브러리와 혼용 가능
환경설정
node.js 와 npm
- Node.js 버전 : LTS 버전 사용
- Mac OS
터미널에서 homebrew가 깔려있는지 확인 후 아래 명령어 입력
$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)
$ brew update
$ brew install node
설치 확인
$ node -v
$ npm -v
yarn 설치
$ npm install --globalyarn
설치 확인
$ yarn -- version
에디터 : VScode 사용
확장프로그램 : ESLint, Reactjs Code Snippets : charalampos karypidis, Prettier-Code formatter
프로젝트 생성
터미널에서 프로젝트를 만들고 싶은 디렉터리에서 다음 명령어 실행
$ yarn create react-app hello-react -> $ yarn create react-app (이름)
실행
$ cd hello-react $ yarn start
이 글은 김민준 님의 리액트를 다루는 기술을 읽고 정리한 내용입니다.
