211111 리액트 입문 리액트 요소와 가상돔

#리액트 요소와 가상 돔

리액트 요소? 리액트가 UI를 표현하는 방법.

const element = <a href='http://xxx.com'>click</a>

이 jsx문법은 babel을 통해

const element = React.createElement(
  'a',
  {href: 'http://xxx.com'},
  'click'
);

이렇게 변환하게 된다.


#리액트에서 가상 돔을 만들고 실제 돔에 반영/변경하는 과정을 보자
리액트 요소를 만들면
객체 형식으로 리액트 요소가 이뤄져있다.

console.log(element)

//출력 결과
const consoleLogReult = {
  type:'a',
  key:'key1',
  ref:null,
  props:{
    href:'~~~.com'
    style:{width:100,}
    children:'click'
  },
  //...

};

만약 컴포넌트를 이용하면

function Title({title,color}){
	return <p style={{color}}>{title}</p>;
}
const compElem = <Title title={'abc'} color='blue'/>

const consoleLogReult = {
	type:Title, // 'p'같은 문자열이 아닌 클래스
	
    ...
}

로 표현된다.

#리액트요소는 불변객체이기때문에 변경불가하다
X react.type ='p' X

---

# 돔요소 키를 변경하면?

import React, {useState,useEffect} from 'react';

export default function Clock(){
  const [seconds,setSeconds] = useState(0);
  useEffect(()=>{
    setTimeOut(()=>{
   	 setSeconds(seconds+1);
    }, 1000);
	})

	return
      <div key={seconds}> /*DOM 요소의 키를 변경*/
          <Title title={`현재 ${seconds}초`} color={color:seconds%2  ? 'red':blue'} />
      </div>
}

 <div key={seconds}> -> div요소가 사라지고 새로 생성된다.

# 컴포넌트의 키를 변경하면?

import React, {useState, useEffect} from 'react';
export default Clock(){
	const [seconds, setSeconds] = useState(0);
  return <div>
          <Title key={seconds}/>
      </div>
    }

 

=> 해당 컴포넌트는 삭제되었다가 다시 추가된다.!

이렇게 삭제되는것은 unmount, 추가되는것은 mount
mount될 때 useState(초기값)으로 할당되므로
<Title key={0}/>으로 초기값 mount가 되는것을 알 수 있다.

#이는 조건부 렌더링 시 생겼다가 없어질때도 마찬가지

 

---

 

#리액트 요소 트리

<div>
  <p>하이</p>
  <div>
    <p>1</p>
    <p>2</p>
  </div>
</div>

이 jsx 문법의 코드는 아래의 리액트 요소 트리로 구성이 된다. WTF

{
  type:'div',
  props:{
  children:[
      {
        type:'p',
        props{
            children:' 하이'
      },
      {
      	type:'div',
      	props{
            children:[
            	{
                	type:'p',
                    props:{
                    	children:'1',
                        
                        ...
                        
                        
            ]
  ]
  }
}

#리액트에서 화면 업데이트 과정
렌더 단계 -> 커밋 단계를 거친다.
변경사항 파악 -> 실제 돔에 반영하는 것

#렌더단계
렌더링시 가상 돔을 생성
이전 가상돔과 비교



#리액트 요소 트리에서, 컴포넌트의 type이 문자열이 아니면 아직 실제 dom으로 만들순 없다.
=> 브라우저가 이해할 수 있는 기본 태그로 풀어내는 과정!
ex) { type:Title, props :{}...
-> 실제DOM이 아니기 때문에 가상DOM인것

실제 컴포넌트 요소도 메모리에 저장되어 빠른 비교하고 __변경된__ 부분만 반영한다.


const [ x, setX] = useState(1);

setX() 호출 시 렌더단계가 시작되는 것.