[React] React?

이대희·2021년 3월 2일

React

리액트는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리다. 리액트의 장점은 데이터가 최신화 될 때 전체 ui를 수정하는 것이 아니라 부분 ui만 데이터를 자동으로 업데이트하며 계산한다.

Vue
2014년에 Evan You가 개발한 코드다. 코드가 깔끔하고 배우기 쉽기 때문에 가장 늦게 생겼지만 성장속도가 빠르다
앵귤러
2010년에 구글에서 개발한 프레임워크다. 타입스크립트 기반으로 안정적이며 앱개발이 가능하다. 그리고 다양한 기능이 내장되있지만 배우기엔 난이도가 높다
리액트
2013년에 페이스북에서 개발한 라이브러리로 오직 보이는 부분만 담당한다. 리액트는 사용하는 사용자가 많아 정보에 접근이 쉬우며 사용자가 꾸준이 증가하고있다.

Node.js

노드js는 자바스크립트를 브라우저 밖에서 동작할 수 있게하는 환경을 의미한다. 노드js를 설치하면 npm이 자동으로 설치되며 node -v를 터미널에 입력하면 노드js의 버전을 확인할 수 있다.

npm을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있다. npm -v를 터미널에 입력하면 npm의 버전을 확인할 수 있다.

CRA

리액트를 시작하는데 필요한 개발 환경을 세팅해주는 도구이다.

리액트는 ui 기능만 제공한다. 따라서 사용자가 직접 구축해야하는 것들이 많다. 전반적인 시스템을 사용자가 하나하나 구축하기엔 신경쓸것이 많기 떄문에 CRA를 이용해 하나의 명령어로 리액트 개발환경을 만들수있다. 리액트를 설치하고 npm start를 하게되면 해당폴더에 리액트가 설치된다.

// 1. Desktop - wecode 폴더 진입
cd Desktop/wecode

// 2. westagram-react 프로젝트 설치
npx create-react-app westagram-react

// 3. westagram-react 프로젝트 진입
cd westagram-react

// 4. 로컬 서버 띄우기
npm start

node.modules, package.json, .gitignore

1) node.modules

CRA 를 구성하는 모든 패키지 소스 코드가 존재하는 폴더.

2) package.json

CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일
모든 패키지소스가 존재하는게 아니라 종류와 버전 정보가 저장된다.
모든 프로젝트마다 package.json 하나씩 존재

3) .gitignore

프로젝트를하다보면 같은 버전의 패키지를 맞춰야할 때 한명이 다운을 받고 package.json을 확인해 버전정보를 보고 설치한다. 하지만 모든 패키지/라이브러리를 보내면 비효율적이기 때문에 gitignore에 추가된 라이브러리/패키지 정보만 푸시한다.
.gitignore 파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.
push 를 해도 .gitignore 파일에 작성된 폴더와 파일은 올라가지 않는다.

index.html, index.js, App.js

1) public - index.html

<div id="root"></div>
리액트에서 보여지는 최종 html이다. index.js에 ReactDom.render()에 내용이 여기로 전달된다.

2) src - index.js

React의 시작 (Entry Point)
ReactDOM.render( <App /> , document.getElementById('root'))
- ReactDOM.render 함수의 인자는 두 개
- 첫 번째 인자는 화면에 보여주고 싶은 컴포넌트
- 두 번째 인자는 화면에 보여주고 싶은 컴포넌트의 위치(html에 루트라는 아이디태그에 App.js 컴포넌트를 넣는다.
이름 함부로 수정하면 안 된다

3) src - App.js