1) react 시작, 보조 프로그램 설치, 리액트 특징, 구현 특징

 

시작

npx create-react-app

 

리액트 특징

 

1. Virtual Dom

돔 객체를 바꾼다

dom과 virtual Dom차이

( SPA(single page application):spa가 아닌 전체가 렌더링되어서 출력 )

기존 dom은  전체 돔을 리로딩해서 렌더링 된다

virtual dom은  바뀌는 부분만 리로딩해서 렌더링

virtual dom은 선택적으로 업데이트된 부분만 업데이트 시켜서 더 빠르다

 

따라서 속도가 빠르다

2. only View( mvc가 아니라) 

mvce(model, view, controller)

대규모 프로젝트는 mvc가 좋지만, 가벼운 프로젝트는 only view가 좋다 

3. Components

리액트는 프레임워크가 아니라, 라이브러리 이다

앵귤러는 프레임워크이다

컴포넌트를 반복해서 사용해서 경량화가 가능하다

 

4. hot reloading

새로고침 필요없이 자동으로 렌더링된 결과가 보여진다

 

5. Server Side Rendering(feat SEO)

검색에 최적화 시킬 수 있다.

렌더링은 클라이언트에서 하지만, 백엔드단에서 페이지렌더링이 가능하다

 

 

 

 

 

 

리액트 구현  특징

1. JSX 문법 : javascript + XML

2. class vs className 

3. ES6 문법 사용

key 값을 idx를 넣어주는 경우도 있지만,

문제를 초래할 수 있기 때문에  아래처럼 키에는 고유한 값을 넣어줘야한다.

4. props의 이해

5.  <> 프레그먼트의 필요성

2개 이상의 태그가 있을 때 필요

6. 조건문

7. 로딩 구현

논리 연산자를 이용한 조건으로 && expression입니다.
조건이 true일 경우에는 && 이후에 위치한 expression을 반환하고, false일 경우 expression을 반환하지 않고 무시합니다.

부가 설치할 것

익스텍션

크롬스토어