[React.js]리액트의 가상돔, 리액트 훅 기초

 

💻 가상돔

 

매번 돔을 새로 반영하는 것은 비효율적이기에, 가상돔이 사용되는데요.

 

가상돔을 두어 이전과 비교한 다음에 "변경부분만 돔에 반영"되도록 해줍니다.

 

📍 JSX 리액트 요소트리

Json타입으로 컴포넌트에 key가 할당되고,

해당 값이 변경될때마다 초기화되어, unmount <-> mount가 진행됩니다.

 

JSX-> 리액트 요소 트리 : 화면의 한 순간을 나타내주는 가상돔으로 사용.

{
  type: 'a' or Component함수, // Dom은 문자열, 컴포넌트는 함수 이름이 들어간다.
  key: key에 지정된 값,
  ref: '',
  props: {
    children,
    다른 속성 키: 값
  }
  //...
}

 

 

📍 가상돔 렌더, 실제 돔 커밋

 

💡 렌더단계

렌더링마다 가상돔 만들어지고, 이전과 비교

 

💡 커밋단계

실제 돔에 변경사항만 리렌더링

 

리액트 요소트리 👉 가상돔 👉 이전 가상돔과 비교 👉 렌더

 

💻 리액트 훅 기초

 

📍 UseState: 상탯값 추가

const [value, setVaule]= useState(0);

[상탯값, 상탯값 변경함수]

 

💡 상탯값 변경함수

비동기, 배치로 처리 👉 "리렌더링을 줄여 성능을 높이고, UI데이터와 화면의 일치를 위해"

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

export default function App(){
	const [count, setCount] =useState(0);
    function onClick(){
    	setCount(count+1);
    	setCount(count+1);
    }
    return(<div>
    	<button onClick={onClick}>증가</button>
    </div>)
}

setCount는 비동기와 배치로 처리 되기때문에, 해당 setCount는 하나만 실행됩니다.

 

 

해결방법으로, 이전 상태값을 매개변수로 넘겨주도록 하면 됩니다.

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

export default function App(){
	const [count, setCount] =useState(0);
    function onClick(){
    	setCount(v=>v+1);
    	setCount(v=>v+1);
    }
    return(<div>
    	<button onClick={onClick}>증가</button>
    </div>)
}

 

+ 외부에서 함수를 사용할땐 리액트 내부에서 관리하지 않아, 배치로 처리❌

 

배치처리 👉 ReactDom.unstable_batchupdate사용

 

📍 useEffect : 부수효과 처리

 

렌더링 중에 부수효과를 처리하게 되면, 프로그램의 복잡도 🔺

useEffect를 통해 렌더링 이후에 발생하도록 해줍니다.

 

💡 렌더링 후 부수효과 실행 

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

export default function Profile({userId}){
	const [user, setUser] =useState(null);	
    useEffect(()=>{
    	console.log(userId)
    });
    return(<div>
    	{/**/}
    </div>)
}

💡 의존성 배열 추가 👉 값변경될 때만 실행

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

export default function Profile({userId}){
	const [user, setUser] =useState(null);	
    useEffect(()=>{
    	console.log(userId)
    },[userId]);
    return(<div>
    	{/**/}
    </div>)
}

두번째 인자 "의존성배열"에 값을 넣어주면, 해당 값 변경시에만 실행이됩니다.

 

+ 빈배열을 넣어주면, mount이후 한번만 실행

+ useState 상탯값 변경함수는 의존생배열에 없어도 됨.

+ useEffect 내부에서 사용할 지역 함수&배열 또한 의존성 배열에 넣어야 합니다.

 

💡 useEffect return

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

export default function Profile({userId}){
	const [user, setUser] =useState(null);	
    useEffect(()=>{
    	console.log(user);
        return ()=>{
        	console.log("unmount")
        }
    },[]);
    return(<div>
    	{/**/}
    </div>)
}

useEffect의 반환함수는, unmount되기 전에 적어도 한번은 호출이 됩니다.