React #1 | React란? / npm ..

ReactJS 란?

복잡한 사용자 인터페이스(UI)를 쉽게 구축하게 위해 페이스 북에서 만든 Javascript 라이브러리.

• 특징
  -> 각각의 독립적인 컴포넌트(하나의 기능을 하는 코드 덩어리) 단위들을 서로 조립해서 만드는것

• 사용문법
  -> JSX 문법

• 라이브러리는 무었일까?
  -> 모든 코딩을 직접 하기에는 무리가 있고 비효율적. 따라, 짜놓은 코드를 가져다가 사용.

React 의 핵심 컨셉

-> re-render 와 components

components

-> 한가지의 기능을 수행하는 UI(UserInterface/ 눈에 보이는 모든것) 단위
-> 컴포넌트는 DOM TREE 처럼 Virtual Dom Tree 라는 가상의 돔프리 형식으로 만든다.

Virtual Dom Tree

-> Reaxct 가 가지고 있는 가상 돔 트리, 진짜 돔트리의 복사본.
-> 진짜 돔트리를 본따서 만든 가상 돔트리.
-> 리액트 어떤 변화가 생기면 자동으로 랜더링을 해서 그 부분만 바꿔서 보여준다.

SPA

• HTML이 하나. 주소가 다르거나 어떤 상태가 바뀌느냐에 따라 HTML에서 바꿔치기 에서 보여준다.

MPA

여러개의 HTML .

SSR

기능 적용이 되있지 않아도 화면을 먼저 볼수 있도록. 화면을 조금더 빨리볼수 있다는 장점.

CSR

기능까지 완벽하게 구현한 상태까지 보여진다.
ex) 버튼이 있으면 버튼을 누를때 일어나는 이벤트까지 완전하게 구현된 모습을 볼수 있다.

ReactJS 는 SPA 에 맞춰짐.

따라, 바꿔치기 해서 보여줘야 한다.
진짜 돔트리랑, 가짜 돔트리를 만든다.
가짜 돔트리에 상태 변화를 일으킨다. 어떤 컴포넌트에 상태가 변화가 되면
버츄얼 돔트리에서 이 부분에 대해 변화가 일어난다.
그리고 진짜 돔트리랑 비교를 하고, 바뀐 부분만 진짜 돔트리에게 적용 시킨다. 적용시킨후 상태 변화가 되었던 맨처음 컴포넌트를 부르는 함수를 다시 로드해서 상태를 변환시킨다.

React 가 SPA에 맞게끔 Virtual Dom Tree 를 활용하여 바뀐 부분만
진짜 돔트리랑 비교를 해서 바뀔수 있도록 만든것.

🤔 그럼 리액트는 = SPA 인걸까?
-> NO!!! SPA 에 적합하게 만들어진것 뿐이지 , SPA 는 아니다.

re-render

• 리액트는 쪼개진 컴포넌트를 사용자 화면에 구성하는 render 함수를 사용
• 업데이트 이전의 가상 돔트리와 업데이트 이후 가상 돔 트리 상태를 비교 업데이트 된 내용이 있다면 그때 Dom Tree를 업데이트 하고 render 함수를 다시 호출하는 과정

React 를 쓰는 이유

• 복잡한 코드를 편리하게 쓸수 있다.
• 유지보수가 편해진다.
• 코드의 가독성이 높다. UI 의 재 사용성이 좋다
• SPA에 적합하다. (re-render)
• React-native (모바일 어플리케이션 제작 언어) 확장성.

결국 React 는 복잡한 UI를 쉽게 제작하고 코드를 재사용하며, 가독성을
높이기 위해 리랜더링과 컴포넌트 사용하는 Javascript 라이브러리 이다.

yarn, npm , npx

• 세가지 모두 node 프로젝트에서 설치되는 패키지나 라이브러리들을 관리해 주는 툴
• 리액트는 여러가지 라이브러리 들을 빌려와 개발

npm

• 노드의 기본 패키지 관리툴 , 사용빈도가 가장 높음
  단, 리액트 프로젝트 생성 시 관련 라이브러리를 다운 받아야 하는데 , 무겁기 때문에 npm 을 활용해서 프로젝트를 만들진 않는다.

📌사용법
npm install 패키지명 (라이브러리명)
npm i 패키지명(라이브러리명)

📌제거시
npm remove 패키지명
npm rm 패키지명

npx

• npm 과 달리 설치를 하지 않고 실행만 시켜주는 도구
• 개발 하는 입장이라면 npm 과 npx의 차이를 느끼지 못함.
• 단, npx를 사용하면 리액트 프로젝트 생성 시 관련 라이브러리를 다운하지 않아도 되기 때문에 리액트 프로젝트 생성시에 주로 사용
• npm 5.2이상 부터는 기본 패키지 관리툴로 지정.

yarn

• 과거 npm 보다 속도, 안정성 모두 뛰어나 이목을 끌었다가, 현재는 npm이 따라가다 못해 능가한 상태
• npm이 가장 많이 쓰이기 때문에 yarn을 지원하지 않는 라이브러리들이 존재

📌사용법
npm i -g yarn
yarn add 패키지명(라이브러리명)

터미널 명령어

cd
cd 경로 -> 해당 경로로 이동
cd.. -> 뒤로가기

리액트 프로젝트 생성법

npx create-react-app 프로젝트명
( CRA - react 에서 제공하는 프로젝트 제작 패키지)

• 바벨, 웹팩을 설정하지 않아도 기본 패키지에 포함.

CRA (Create-react-app)

• React 에서 따로 설치하지 않아도 필요한 라이브러리들은 자동으로
  설치해주고 폴더 구조도 자동으로 만들어주는 일종의 명령어

• 최고 장점은 설정하기 까다로운 "바벨" , "웹팩"을 초기 패키지에 포함

바벨, 웹팩 (bable, webpack)

바벨 (babel)

• 트랜스파일러 (번역기)
• ES6 이상의 문법 코드들을 지원하지 않는 브라우저가 이해할 수 있도록 ES5 이하의 문법으로 변환

-> 최신 버전이 지원 되지 않은 브라우저에 맞는 버전의 언어로 변환

웹팩 (Webpack)

• 가장 많이 사용 되는 "모듈" 번들러
• 애플리케이션을 구성하는 자원(html, css, js, img, audio...)등을
  모두 각각의 모듈로 보고 이를 종합해서 하나의 결과물을 만드는 도구

"모듈" 이란?
-> 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위(코드 집합)
ex)

module.exports = printab {
	const print = () => {
    	console.log("a")
      	console.log("b")
    }
}

printab.print();

-> 모듈을 printab 라는 이름으로 내보낼 것이고, 여기에는 print 라는
함수가 있다.
따라 printab.print(); 이런식으로 사용할수 있음