React?

React의 시작

웹에서 사용자들이 원하는 기능이 많아지고 사용자들이 증가하면서 인터랙션 처리에 대한 부분이 복잡해졌고, 새로운 기술이 필요로 하였으며 리액트가 등장하면서 3세대 웹이 시작되었다.

---

3세대 웹

jQuery

• DOM을 더 쉽게 제어
• 하지만 돔에서만 작동(한계)

Framework

• 다른 사람이 만들어 둔 코드
• 틀 안에서 제한된 도구로만 사용가능하다.
  
  

  Angular
  From google
  TypeScript 기반 안정적
  다양한 기능 내장
  -> 무겁고 배우기 어렵다.
  
  Vue
  자기만의 법칙
  배우기 쉽다.

Library
내 작업에 다른사람이 만든 코드를 가져옴

React

• 내장되어 있는 기능이 부족하여 다른 기술과 같이 사용
• 자바스크립트 문법을 그대로 사용 (JSX)
• 오픈 소스 - 페이스북의 지속저인 관리
• 생태계 활성화
• 컴포넌트를 더 단순하고 간단하게 정의할 수 있음
• View -> 웹 뿐만 아니라 app에서도 사용가능

---

React의 특징과 장점

사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 라이브러리
UI를 자동으로 업데이트해준다는 장점
-> 버츄얼 돔을 통해 최적화 구현

Virtual DOM

필요한 것을 먼저 찾아봐줌.
브라우저에서
DOM 조작 -> Layout -> Paint
=> 비효율적

선언적

What
상상해서 그림을 그리고
그 그림을 로봇(React)에게 전달한다,
원하는 최종결과를 그린다.
디버깅시에도 내가 기대했던 부분에서 다른 것만 고쳐주면 된다
절차적 HOW
해야하는 동작들을 순서대로 진행한다.

Node & npm

자바스크립트의 실행환경
JS = text
자바스크립트를 해석하고 실행하는 도구를 자바스크립트 환경
환경- 브라우저
이제는 Node는 브라우저 밖에서도 자바스크립트를 사용하게 해주는 부분
NPM Node Package Manager
패키지 실행할 수 있는 하나하나의 프로그램 =리액트
리액트같은 것들을 다운받을 수 있게 하는 것
Node는 스마트폰
NPM은 앱스토어

CRA Create React App

리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구
toolchain

하나의 명령어로 리액트 개발환경 구축이 가능하다.
node_modules
npm으로 다운받은 모든 패키지들이 저장되어 있는 폴더
package. json
프로젝트에 대한 정보들이 기입된 파일
script 프로젝트에서 실행할 수 있는 명령어들이 있는 곳
dependency 프로젝트에서 필요로하는 다른 패키지들에 대한 정보가 있는 곳
gitignore
git으로 관리하지 않을 파일 또는 폴더등을 기입해두는 파일

Componets

재사용 가능한 각각의 독립된 모듈
재사용 가능한 UI 구성 단위
장점
코드의 재활용성 증가
코드 유지보수 용이
해당 페이지가 어떻게 구성되어 있는지 파악 용이
컴포넌트는 또 다른 컴포넌트를 포함

JSX

HTML 와 JS를 합친 것 같은 느낌
마크업을 편리하게 작성하기 위한 문법
Babel이라는 패키지를 이용해서 JS가 인식할 수 있게 변환해줘야 한다.
장점
HTML tag를 그대로 사용
HTML마크업과 JS로직을 같이 구현
특징
하나의 부모태그로 감싸져야한다.
하나의 단일태그로 감싸)))
<>프래그넌트 문법 사용 = 불필요한 태그 사용x
모든 태그가 셀프 클로징 가능
</>
카멜케이스
h1 class x -> h1 className

JSX 문법
속성명은 camelCase로!

• onClick, onBlur등으로 작성해야함.
  자바스크립트 예약어와 같은 속성명을 사용하면 안된다.
• for, class같은 이름을 사용하면 안되고
  for - htmlFor / class - className으로 작성
  Fragment
• 반드시 하나의 요소로 감싸주어야 한다.
• 의미가 없는 부모 요소를 만들때는 <>,</> 혹은
  자바스크립트 표현식 넣기
• {}로 자바스크립트의 표현식을 넣을 수 있습니다.
• 의미가 없는 부모 요소를 만들때는 <>,</> 혹은
  컴포넌트의 첫 글자는 대문자