JSX
React.js 는 JavaScript 라이브러리입니다. 라이브러리는 기능 단위의 반복적으로 사용될 수 있는 코드를 모아둔 것입니다. 비교적 사용 목적이 프레임워크에 비해 자유롭고, 가볍습니다. React는 UI 관리의 편리성을 위해 Facebook에서 개발한 라이브러리로, 그 안에 쓰이는 언어는 Javascript의 확장된 언어에 해당하는 JSX입니다.
JSX의 syntax를 따져보면 HTML같지만, 사용되는 파일은 Javascript 파일에서 사용됩니다.

React.js를 사용하기 위해 JSX문법이 포함되어 있으면 해당 파일을 정규 javascript 문법으로 변환시키는 컴파일 과정이 필요합니다.

컴파일, compile과정이란?

React?

웹 애플리케이션의 발전에 따라 등장하게 되었다. 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다.

자동으로 UI 업데이트

가상 DOM.
리액트에서 가상 돔의 개념이 나타난다. 성능 개선에 큰 역할.

node.js
자바스크립트가 브라우저 상에서만 동작하는 데, nodejs를 통해 브라우저 밖에서도 자바스크립트가 동작하게 하는 환경.

리액트는 뷰를 위한 라이브러리인데, 그것을 개발하기 위한, 로컬 서버를 띄워주기 위한 환경, 기반이 nodejs를 통해 구축된다.

npm node 기반의 패키지를 관리하기 위한 도구.
npm을 이용해 다양한 패키지를 설치하고 관리한다.

3rd party library의 설치 및 관리도 npm이 관리한다.

리액트는 UI를 위한 것, 개발 환경을 리액트만으로

CRA를 통한 리액트 개발 환경 구축 가능하다는 것. 이력서에 들어갈 수 있다.

CRA (Create-React-App)

CRA를 만들었을 때 생기는 구성 요소들, 파일들을 간단하게 살펴보자.

node_modules

하나 하나 패키지이다. CRA가 관리하는 패키지가 담겨져 있는 폴더이다.

package.json

gitignore에 무거운 코드 소스인 node_modules는 위치하게 된다. git에 공유되지 않게끔 대신
package.json 파일이 git을 통해 공유되고, package.json을 공유한 뒤 npm install을 하게 되면 npm에서 package.json의 목록을 읽어가며 필요한 파일을 다운로드 받고, 그 이후에 node_modules 소스 코드 모음 폴더가 새로 형성된다.

"dependencies": {//Important!! Additionally installed packages are logged on here. here on dependencies. It stores the information about the name of a package and its version. And the actual source code is in the directory node_modules. package.json is for the log.
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",//name and version
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},

Component

컴포넌트는 크게 2가지 종류가 있다.
클래스 베이스와 함수 베이스.

profile
J for Journey

0개의 댓글