리액트 _13_React & Redux 특징

React

 1. 화면 UI (빠르게 화면에 출력됨)

    - JSX

    - XML 

       1. 최상위루트

       2. 여는태그 닫는태그 동일

       3. 속성값은 ""로 적기

       4. style대입할 때

           4_1. 외부CSS : className 사용

           4_2. 내부CSS : style ="display:block"   

    - 계층구조 -> 트리형태

    - DCM

  

2. 데이터 관리

    - props(속성) 값으로 데이터 이동 (태그 형식으로 호출해야한다)   ---------> 고정된 값 전달 시 사용

    - state : 외부(서버)에서 데이터 값 받아서 node.js 또는 spring으로 처리 ----> 변경되는 값 전달 시 사용=> HOOKS

 

3. 가상 DOM: 원본과 비교했을 때 바뀐 부분이 있으면 변경되는 것이기 때문에 자연스럽게 바뀜.

                   화면 깜박임 없음(기존은 전체를 다 지웠다 다시 만드는 것이라 깜박임 있었음) 

 

4. 전송 순서(자동실행함수)

<APP> -> constructor -> render-> componentDidMount---(setState) ->render

 +) function은 constructor , componentDidMount, render 를 사용하지 않고 역할을 할 수 있는 것을 만들 수 있게 해준다.

                   반드시 안에 return 적고 안에 html 써야한다.  (render 역할)

                   useState() -> constructor 역할

                   useEffect() -> componentDidMount, componentDidUpdate역할

리액트 구조

React 단점

= 단방향(위에서 아래로 순서대로 정보를 보내는 방식) 

   - 전송을 많이 해야해서 비효율적이다.

이 전체흐름이 DOM

Redux

- 외부에 값을 저장해놓고 쓰는 것. (React 보다 효율적)