react 구글링
페이스북에서 제공하는 오픈 소스 javascript 라이브러리
사용자 인터페이스 == UI
UI 쉽게 만들기 위해서 사용
자습서 읽어보기 클릭하면 설명 자세히 나와있음
React
자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위해 사용(페이스북 제공)
React 특징
1. 컴포넌트 기반 구조
컴포넌트 == 블록
하나 만들어두면 필요한 곳에서 조립해서 쓸 수 있음
하나 하나는 독립적이고 재사용 가능한 모양
컴포넌트 이용해서 크게 원하는 구조를 만들 수 있음
=> 독립적이고, 재사용 가능한 코드 조각으로, 여러 컴포넌트를 조합하여 크고, 복잡한 사용자 인터페이스를 만들 수 있다.
2. 가상 DOM(Virtual DOM)
기본 자바스크립트, HTML만으로 만드는 웹페이지 => DOM
Document Object Model
react DOM 으로 이루어져있음 가상 돔
브라우저라서 DOM 으로 이루어져있음
가상 DOM 이 바뀐 부분 먼저 읽어들인 다음 덮어씌움
실제 DOM에 적용하기 전 가상 DOM 에 적용한 후 변경 하기 전에 실제 DOM이랑 가상 DOM 비교해서 필요한 부분만 update 해줌
REACT 사용 안할 경우엔 처음부터 끝까지 코드를 다시 읽음
=> 상태가 변경되면 실제 DOM에 변경을 적용하기 전에 가상 DOM에 먼저 변경을 적용하고, 이를 실제 DOM과 비교하여 필요한 부분만 업데이트 하는 방식 -> 성능이 향상됨
3. JSX(JavaScript XML)
JSX는 자바스크립트와 HTML(마크업 언어)을 결합한 문법으로 UI를 정의할 때 직관적이고 읽기 쉽게 만들어줌
JSX는 브라우저가 이해할 수 있는 자바스크립트 코드로 변환
Hello, world! 모양을 브라우저에 보여줄 때 JS만 이용한다면
const h1 = document.createElement("h1");
h1.innerText = "Hello, world!";
body.append(h1);JSX 로 하겠다고 한다면
const element = <h1>Hello, world!</h1>;
return (
{element}
)화면에 띄워줌 바로
직관적이고 활용하기 쉬움
비동기로 응답 받았을 때 JS에서 createElement 해서 하나씩 만들어줬어야했는데 react 사용하면 편해짐
learning curve 가 심함
배우기 어려움
Node.js 설치하기
js 코드로 백엔드 코드 칠 수 있게 해줌
react의 runtime 환경을 제공해줌
Nodejs 구글에 검색
LTS 버전 설치하기
C드라이브 tools에 설치 후 설치파일 더블 클릭하여 설치 진행하기
tools 에 다운로드 받기
체크 안하면 못 넘어가는 거 빼고는 체크 안해도 됨
C드라이브 workspace에 React 폴더 만듦
폴더 안에서 open git bash
Bash는 Unix 기반 시스템의 셸이므로 npm과 yarn을 설치 및 이용하는데 효율적임
node package maneger -> node.js 설치하면 자동으로 깔림
- Bash 창 열어서 설치 및 버전 확인하기
node -v
-> 버전 정보 제대로 안 나오면 잘못 깐 거임
확인해야함
yarn 이 조금 더 빠르고 사용하기 편해서 yarn 다운로드
Yarn 설치 및 React 앱 생성
yarn 도구는 npm 문제점을 개선한 패키지 매니저로, 패키지를 훨씬 빨리 설치할 수 있다.
- yarn 설치 및 버전확인
npm install -g yarn
npm 은 자동으로 설치돼있음 -g 글로벌로
yarn --version
- react 앱(프로젝트) 생성하기
yarn create react-app {앱 이름}
앱이름 == project 이름
이렇게 나와야지 설치 끝난 거
- VSCode 에서 해당 폴더(my-app) 열기
ls
cd my-app/
-> 생성된 프로젝트 폴더로 이동
code .
-> 프로젝트 폴더 vs code로 열기
node_modules 외부 라이브러리 자동으로 깔려져 있는 것들
모듈 정리돼있는 곳
(dependency 같은 거)
만들자마자 git 이 관리함 READMe.md 파일 생성돼있음
public
react 아이콘, 로고 등등 있음
react app 실행시키기
VS Code 기본 터미널 Git bash 로 변경
-
ctrl + shift + p 누른 후 상단 창에 default 작성
-
터미널 : 기본 프로필 선택 클릭
-
Git Bash 선택
-
터미널 변경 후 ctrl + shift + `(백틱)을 눌러 터미널 열기
터미널에 yarn start
->프로젝트 실행시키기
http://localhost:3000/
기본 포트 3000번 사용함
src/App.js 에 정의 돼있음
App.js 안에 return 안에 작성된 내용이 브라우저에 보여짐
return 구문 안에 작성된 내용이 화면에 렌더링 됨
