노드&리액트 공부기록(9) - 리액트란?, Real Dom , Virtual Dom, React 설치, npx, npm 차이점

🔍React란?

• 리액트(React)는 웹 프레임워크로 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
• facebook에서 제공해주는 프론트앤드 라이브러리라고 볼 수 있다.
• 싱글 페이지 애플리케이션, 모바일 애플리케이션 개발 시 토대로 사용될 수 있다.
• 결론: 현재 많이 활용되고 있는 웹&앱의 View를 개발하는 데에 도움을 주는 인기있는 라이브러리!

 

🔍React 특징

• 1. Data Flow : 데이터가 단방향 흐름을 가짐.
• 2. Component 기반 구조 : 독립적인 단위의 소프트웨어 모듈. React는 하나의 UI를 여러 컴포넌트를 쪼개어 만듦.
• 3. Virtual Dom
• 4. Props and State 
• 5. JSX

 

🔍Real Dom vs Virtual Dom

Real Dom	Virtual Dom
-10개의 list 중 하나의 list만 변경이 있어도 10개 전체를 Reload 해야 함. -비용이 많이 듦.	-10개의 list 중 하나의 list만 변경이 필요할 시 그 한 가지 아이템만 dom에서 바꾸어줌. -부하가 걸리지 않고 비용이 적게 듦. -Real Dom을 copy한 것.(Real Dom과 같은 properties를 가짐.) 1.Virtual Dom에서 Real Dom의 스냅샷을 찍어두고 2.바뀐 부분이 있나 관찰을 한 다음, 3.바뀐 부분이 있을 시 Real Dom에서 바꿔줌.

 

🔍React 설치

npx create-react app .
//. : client directory 안에다가 create-react 설치하겠다는 의미로 점을 찍어줘야 한다.

 

node.js를 할 때까지는 npm 명령어로 install을 했었다. 그렇다면 npx와 npm의 차이는 무엇일까??

 

🔍npm, npx

npx	npm
-npx를 이용하여 node registry에 있는 create-react-app 이용 -최신 버전에 해당하는 패키지를 설치(항상 최신 버전을 사용할 수 있다!!) -실행 이후 해당 패키지를 제거(disk 공간 낭비 줄어듦.) -create-react-app 등의 보일러 플레이트 모듈에 효과적.	-npm은 일종의 registry역할을 했다. bscrypt, mongoose 등을 담고 있는 곳. -package.json에 정의가 되어 있다. -create-react0app 과 같이 변경 사항이 잦은 모듈의 경우 매 설치마다 npm으로 재설치하지 않을 시 이전 버전을 사용할 여지가 있기 때문에 항상 최신버전을 사용할 수 있는 npx가 효율적. npm install locally -/node_modules/.bin directory에 다운받아짐. npm install globally -'npm install -g' : 전역에 설치. 자주 사용하지 않는 무거운 패키지가 로컬 스토리지에 남는다.

 

npm run start 하면 짜잔! 리액트 앱이 실행된다.