02/17 [React] Virtual DOM & Component &CSS

- DOM 이란?

DOM이란 (Document Object Model)의 약자로 객체를 통해 구조화된 문서를 표현하는 방법

DOM은 동적인 UI에 최적화가 되어 있지 않기 때문에 JQuery등의 라이브러리를 사용하여 동적인 효과를 줄 수 있다.

하지ㅣ만 최적화 되어있지 않기 때문에 많은 동적인 ul가 있다면 어플리케이션의 속도가  어어어어엄청

느려질 수 밖에 없음. 따라서 최소한의 DOM 조작을 통해 작업을 처리하는 방식으로 이를 개선 할 수 있다.
그 중에 DOM작업을 가상화 하여 미리 처리한 다음 한꺼번에 적용할 수 있는 방법이 있다.

그게 바로 가상돔!!!!

 

-Virtual DOM이란?

Virtual DOM을 이용하면 실제 DOM에 접근하여 조작하는 대신에, 이를 추상화시킨 자바스크립트 객체를 구성하여 사용한다. (실제 DOM의 가벼운 복사본이다)
가상 DOM은 실제DOM의 상태를 메모리 위에 계속 올려두고 DOM에 변경이 있을 때만 해당 내용만 반영 한다.
그래서 성능 향상을 가져오게 하는 개념이다

 

후려치자면

실제DOM 은 있음

이걸 그대로 가상의 메모리에 복사함 

변경할 내용이 있다면 가상DOM을 변경함

변경된 부분을 실제 돔에 적용시키는 개념!!

 

※React에서 데이터가 변하여 브라우저 상의 실제 DOM에 업데이트 하는 과정은 3가지 절차를 따른다

A) 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링.
B) 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교.
C) 바뀐 부분만 실제 DOM에 적용.
   (컴포넌트가 업데이트 될 때 , 레이아웃 계산이 한 번만 이뤄어진다)

즉, React는 지속해서 데이터가 변화하는 대규모 애플리케이션 구축을 위해서 탄생하였다. 

예]
DOM  => 요게 실제 돔
<ul class ="list">
     <li> item 1 </li>
     <li> item 2 </li>    
     <li> item 3 </li>  
</ul>

JSON (virtual DOM)   ==> 이것이 가상 돔
{
     type: 'ul',
     props: { 'class': 'list' },
     children: {
               { type: 'li', props: {}, children: ['item 1'] },
               { type: 'li', props: {}, children: ['item 2'] },
               { type: 'li', props: {}, children: ['item 4'] }
    }
}

Virtual DOM은 직접 DOM API를 사용하지 않고, 변경된 부분만 JSON 객체를 Update한다
이러한 처리는 실제 DOM이 아닌 메모리에 있기 때문에 훨씬 더 빠르다 !!!

---

[Component]

재사용이 가능한 HTML 코드 조각이다

리엑트는 Component기반임!!

컴포넌트는 두가지로 나눔

class형 vs 함수형 

- 함수형 component는 상태를 유지 할 수 없다. 그래서 변화하는 데이타를 가지려면
  클래스형 component로 만들어야 했다

- 함수형 컴포넌트는 props를 입력으로 받아서 JSX(React Element)를 출력(리턴)하는 기능을 수행한다. 

- 클래스형 컴포넌트는 state(data-객체?)를 가질 수 있고 반드시 render( )함수를 가져야 한다.
  변화하는 데이타가 있는 컴포넌트는 클래스 컴포넌트로 만든다

- 함수형 컴포넌트는  함수 호출이고 클래스형 컴포넌트는 생성자 함수 호출이다

- 함수형 컴포넌트는 메모리를 적게 사용한다. 그리고 생명주기가 없다
   하지만 클래스형 컴포넌트는 생명주기를 가지고 있다.

- 컴포넌트가 반환하는 것은 JSX이다 
- ※리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다.
- ※초기 리액트는 State와 컴포넌트의 Life Cycle을 관리하려면 클래스형 컴포넌트를 생성 해야했다.
  UI만 표현해주는 컴포넌트는 함수형 컴포넌트로 만들었다.
  리액트 16.8부터는  모든 컴포넌트를  함수형 컴포넌트로 만들수 있게됐다.   
  함수형 컴포넌트에서도  리액트 훅 API로 State와 컴포넌트의 Life Cycle의 관리가 가능해졌다.

 

---

  
[ 함수형 컴포넌트 ]

 

- 자바스크립트 함수로 컴포넌트를 만든다
- 함수형 컴포넌트를 만들때 첫글자는 대문자로 만든다.

 

- props를 인자로 받아서  JSX(React Element)를 리턴하는 함수로 props는 읽기 전용이다

부모에서 자식으로 props로 내려보내는게 기본적인 구조임

근데 자식에서 걍 막 내용을 수정해 버리면 부모가 알 수가 없음

그래서 props엔 수정기능이 없고 읽기전용임(수정은 그래서 한 곳에서 관리함)

 

 

[props와 state]

5-1.props
- 읽기 전용으로 태그의 속성 형태로 부모에서 탑 다운방식으로 자식에게 내려보내는 
  데이타를 의미한다. 즉,  props 는 읽기전용이기 때문에 최상단 엘리먼트가 모든 props를 가지고 이를
  자식 컴포넌트에 태그 속성 형태로 넘겨주는 형태가 바람직하다 

 -props를 받은 자식에서는 변경이 불가능하다.바꾸려면 이벤트로 부모에 요청해야한다
  왜냐하면 자식에서 변경시 부모는 그 변경된 값을 알 수 없다.
  즉 상태 관리를 할 수 없는 문제점이 생기기때문에 읽기전용 속성인 것이다.

 

5-2.state
-state는 변하는 데이타이다
-변하는 데이터가 있다면 그 상태를 state로 관리하고 state의 값을 변경하게 
 되면 state와 연결된 컴포넌트가 자동으로 렌더링이 된다.

-할당문으로 state를 변경하면 함수형 컴포넌트 함수가 호출이 안되어 변화가 반영되지 않는다

-특정 자식 컴포넌트에서만 관리되는 state는 local state 라고 하고 
 다른 컴포넌트와 공유되어야 하는 컴포넌트는 Top레벨 컴포넌트에 state를 두고 
 공유해야 하는데 이와 같은 컴포넌트를 application state라고 한다.

  ==> 후려치기 : 자식은 데이터를 가지고 있자 않아서 수정을 자식에서 수정 안 됨, 부모에서 데이터들을 싹 가지고 있고 수정이 이루어 지면 그때 걍 수정된 데이터를 자식에게 내려보내게 하는 게 application state

 

 

---

스타일(CSS) 지정하기

 

app.js가 최상위 객체!!

이건 차차 정리