React

: 많은 library를 이용해서 "UI rendering"을 한다.

React는 Client와의 interaction이 많은 경우에 적합하다.
React는 framework보다는 Library에 가깝다.

platform, framework, library

• platform
  다른 프로그램을 실행 시켜 줄 수 있는 프로그램
  : Java, Node
• framework
  : 실행 흐름에 대한 제어를 가지고 있다.
  

React는 component(React app을 구성하는 최소한의 단위)의 집합이다.
각 component 별로 별도의 js 파일이 만들어지게 된다.

component
1. class형 component
2. 함수형 component

: 과거에는 class형 component를 사용하였다. 함수형 component보다 기능은 많지만 코드량이 많아서 복잡하고 상대적으로 속도가 느리다.
: 함수형 component는 기능상에 제약이 있지만 class형 component에 비해 간결하고 속도가 빠르다.

React Hooks를 통해 함수형 component에 기능이 개선되면서 이제는 class형 component를 사용하지 않는다.

jQuery는 쉽게 사용이 가능하지만 1. Maintenance(유지보수) 2. 속도 문제가 있다. 많은 양의 interaction이 있는 경우 느려진다. jQuery는 DOM을 직접 제어하기 때문에 DOM이 변경될 때마다 repaint 된다.
=> Virtual DOM을 이용해서 속도문제를 해결한다. (Rendering을 여러번 하지 않도록 해준다.)

JSX (Javascript syntax extension)

: Javascript 확장 문법이다. React는 JSX를 이용한다. JSX를 이용해서 UI를 표현한다.
HTML과 Javascript의 혼합이라고 할 수 있다.

원래는 const str = "<H1> Hello World </H1>"; => Javascript 코드
const str = <H1> Hello World </H1>; => JSX 코드

사용 규칙

1. JSX를 이용할 경우 여러 element가 있다면 반드시 하나의 부모 요소로 감싸줘야 한다.

환경 구축

1. Node.js 필요 (npm) - 필요한 모듈들을 설치하기 위해 필요하다. React가 Node 상에서 실행되는 것은 아니다. Node.js 설치

2. React Application 만들기

• webpack module
  : 배포를 할 때 여러개의 JS 파일을 하나의 파일로 묶는다.
• babel module
  : ES6를 기본으로 구현한다. 하지만 아직도 많은 client들은 ES6를 지원하지 않는 구형 browser를 사용한다. 그래서 ES6를 구형 browser에서 동작할 수 있는 Javascript 코드로 변형한다.
  => 과거에는 이 둘을 먼저 설치하고 설정한 후에 React App을 작성하였다.
  => "create-react-app" 을 이용해서 편하게 구현을 시작할 수 있다. (npm으로 받는다.)

3. my-todo-app 폴더 생성하고, 터미널에서 연다. npx create-react-app . 명령을 실행한다.
   

4. my-todo-app 폴더를 연다.

• public
  -index.html : 시작 HTML
• src
  -index.js : Javascript 시작점

package.json
: 프로젝트에 대한 기본 정보

5. 시작 npm run start

Todo App 만들기

• 만들 화면
  

코드 구현

코드 저장소

1. class형 component -> 함수형 component 방식으로 구현하였다.
2. component 별로 나누어 준다.
   
   -> 재사용성, 유지보수, rendering 효율을 위해
3. tailwind로 스타일 예쁘게 바꿔주기
   
4. Drag & Drop(dnd) 구현하기
   : web page(application)에서 구현이 쉽지 않다.
   HTML5에 들어오면서 dnd API가 정식으로 등장하기 시작했다. (Javascript API)
   Javascript API를 쉽게 만들어서 module로 제공한다.
   => "react-beautiful-dnd"
   (dependency를 해결해야 사용할 수 있다.)
   (react 16, 17 버전에서 사용 가능하다.)

	> npm install react-beautiful-dnd --save --legacy-peer-deps

• dnd component
  
  Draggable : drag하고 drop하면 element의 속성값이 변한다.

5. 현재 파일(App.js, Lists.js, Form.js)을 더 쪼개준다.
   할 일 하나를 하나의 component로 분리한다.(List.js)

Rendering에 대해서 생각해보아요 🤔
현재 코드 문제 : 글자를 입력할 때마다 rendering이 다시 되고 있다. 변할 필요가 없는 부분을 다시 그리는 것은 낭비이다. 이 낭비를 줄이면 속도가 더 빨라질 수 있다.

=> React.memo()를 사용해서 해결한다.
: 다시 그릴 때 이전 상태와 비교해서 변화가 없는 component는 다시 그리지 않는다.
=> useCallback()

6. 수정 처리 구현하기
7. Axios (Ajax 처리)