[React] 리액트 Intro

React

• 사용자 인터페이스(UI)를 담당하는 자바스크립트 라이브러리입니다.
• 가상돔(Virtual DOM)을 통해 UI를 빠르게 업데이트합니다.
• 변경될 요소만 실제 DOM에 적용하기 때문에 랜더링이 빠른 장점이 있습니다.
• 생태계가 활성화되어 있고, React Native의 사용으로 사용자가 꾸준히 증가하는 추세입니다.

Node.js

• 프로젝트 개발환경을 구축하는 주요 도구들이 Node.js기반입니다. (ex. CRA, Babel, Webpack)
• npm : 노드 패키지 매니저. 패키지 관리 도구.
  npm을 통해 다양한 패키지의 설치와 관리가 가능합니다.

CRA (Create-React-App)

• 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구(toolchain) 입니다.
• npm create-react-app react-project-name 실행으로 서버, 기본폴더 등이 설치됩니다.

cd 설치할 디렉토리
npm create-react-app 프로젝트명
cd 프로젝트명
nmp 프로젝트명

1) node-modules - package.json - .gitignore
2) index.html - index.js - App.js

• git clone 후 npm install 으로 개발 환경 셋팅

Component

• 재활용 가능한 UI 구성 단위
• 리액트 컴포넌트 종류
  1) 클래스형 컴포넌트
  return render()
  2) 함수형 컴포넌트
  -Hooks의 등장으로 state, life 사이클 사용이 가능

JSX (Javascript Syntax Extention)

• 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법
• JSX로 작성한 코드는 브라우저가 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.
• JSX 문법
  1) HTML과 중복 키워드
  class -> className
  for -> hmltFor
  2) 자바스크립트 사용하기 => {}
  1-1) 자바스크립트 로직
  1-2) inline-style 입력
  3) 리액트 플래그먼트 : render 함수의 리턴하는 최상단 태그는 한 쌍이어야 합니다.
  <> .. </>
  4) 클로징 태그 필수
  - 셀프 클로징 : <img />
  • 클로징 태그 : <img></img>

React 폴더 컨벤션

/public/images
/public/data

/src/components
/src/pages => 페이지 별로 컴포넌트 생성
/src/pages/Login
/src/pages/Login/Login.js
/src/pages/Login/Login.scss
/src/pages/Main
/src/pages/Main/Main.js
/src/pages/Main.Main.scss
/src/style/reset.scss
/src/style/common.scss