React란
사용자 UI를 만들기 위한 JavaScript Library
- 지속적으로 데이터가 변화하는 대규모 애플리케이션 Facebook에서 개발 Library.
- MVC Architecture(Angular, Vue)와는 다르게 오로지 보여지는 것만 그려준다. 그만큼 내장되어있는 기능이 부족해 Third-party 라이브러리를 함께 사용
- 대형 사이트인 Facebook에서 사용하여 React 환경이 활성화가 많이 되어있어 다양한 자료들이 있고 React Native를 사용하여 더욱 다양한 곳에서 사용할 수 있다.
Virtal DOM(가상돔)
이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술
SPA (Single Page Application)
한 개의 html파일로 이루어져 있는 것
왜 React를 사용해야할까?
Web Application의 발전
Framework에는 주도권이 Framework에 있어 그 구조에 맞게 개발하고 libraray는 재료만 주는 경우, 더욱 규모있는 페이지를 만들기 위해
Angular
- 2010년 구글에서 개발
- TypeScript기반 매우 안정적이고 탄탄하고 다양한 기능이 내장되어있다.
- 무겁고 배우기 어렵다는 단점
Vue
- 2014년 Evan You라는 개인이 개발
- 가볍게 배우기 좋지만 역사가 얼마 안돼 활성화가 되어있지 않아 다양한 자료를 얻기 힘들다.
Node.js
자바스트립트가 브라우저가 아닌 서버등 밖에서도 동작하게 하는 환경
- 프로젝트 개발 환경을 구축하는 주요 도구들(ex: CRA, Babel)이 Node.js 기반이기 때문에 사용함
- Node.js를 설치하면 npm이 자동적으로 설치된다.
npm (Node Package Manager)
노드에서 팩키지들을 관리해주는 관리프로그램
CRA (Create-React-App)
리액트 프로젝트를 시작하는데 필요한 개발 초기 환경 설정 도구(toolchain)
- React는 UI기능만 제공하기 때문에 개발
- CRA는 리액트로 웹 애플리케이션 만들기 위한 환경 제공
- CRA를 이용하면 하나의 명령어로 개발환경 구축이 가능
node_modules
CRA에서 필요한 파일들이 설치되어있는 것, 실제 패키지들이 담겨있는 곳
- .gitigrnoer파일에 담겨있는데 그 이유는 파일이 너무 헤비함
- package.json에 정보가 다 담겨있기 때문에 올릴 필요X (npm install을하면 받을 수 있어서)
public
- data: 백엔드에서 보내줄 데이터가 없을 때 임시로 만드는 더미 데이터
- image: 이미지 파일
.gitignore
github에 올리지 말아야할 파일, 트랙킹 당하지 말아야할 문서들
package.json
환경설정, terminal명령어 (프로젝트이름)
dependencies
어플리케이션에서 사용하는 모든 패키지이름 들어가 있음
Src
- 안의 index.js, App.js만 남기고 없애준다.
- public안에 .html 파일이 한개로만 구성되어 있기 때문에 SPA이다.
- / /절대경로는 import에선 사용할 수 없고 public에서 무조건 시작한다.
- components: 공통적인 컴포넌트 관리
- pages: 페이지 단위의 컴포넌트 폴더로 구성, 페이지에 걸맞는 css도 여기에 만든다.
- styles: 공통적인 css 파일들
Component
재활용 가능한 UI 단위
- 재활용 가능, 코드 유지보수에 좋음, 구성 파악 좋음
- 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다.
Class형 컴포넌트
render(){return ()}으로 JSX구문을 반환
함수형 컴포넌트
return()으로 JSX구문 반환
훅스형 컴포넌트
함수형에서 lifecylce, state를 사용하지 못했던걸 다른 방법으로 구현하게 만들어줌
차이점👉 생성자의 유무
JSX
리액트에서 사용하는 자바스크립트 확장 문법(JavaScript Syntax Extention)
JSX로 작성한 코드는 JS가 아니기 때문에 Babel을 사용하여 일반 JS코드로 바꿔줘야한다. 👉 컴파일(Complie)
길어지는 코드를 좀 더 가독성있게 보여주기 위해 사용
주의점
- className, htmlFor 같은 경우 class, for가 JavaScript에서 쓰이기 때문 헷갈리지 않기 위해 다른 단어를 만들어 방지해 놓았다.
- 형제 관계에 놓인 태그들은 항상 한가지 태그로 감싸줘야한다.
<> </>프래그먼트 태그<div></div>를 넣으면 불필요한 div태그도 생기고 깨질 우려가 있어 빈 태그를 넣는다. - JavaScript코드가 들어갈 경우
{}를 써야한다. 두 번째{}는 객체형식을 명시해주기 위함 - 단일태그에 한해서 closing을 해줘야한다. ex)
<input />,<br /> - self closing도 가능함 ex)
<div />
