[항해99 WIL] Virtual DOM && props && state

 Virtual DOM                               

 

Virtual Dom이란?

랜더링을 하는 과정에서 서버 또는 클라이언트가 parsing한 DOM tree과 CSSOM을 가지고 render tree를 만들게 되는데 이후에 layout과 painting을 거쳐서 사용자가 가시적을 볼 수 있는 클라이언트가 완성이 된다. 이때 SPA의 경우에는render tree의 구조도 복잡하기 때문에 사용자의 액션마다 모든 DOM을 리랜더링할 수는 없다. 이때 사용되는 Virtual DOM은 먼저 사용자의 액션에 따른 변화를 계산하여 Node를 수정하고 페이지를 업데이트 하는과정에서 DOM tree와 차이점을 비교해서 차이가 나는 부분만 리랜더링하면서 UX를 최적화하기 위해서 고안된 DOM의 복제품이다.

 

 

---

props 

props란?부모 컴포넌트에서 자식컴포넌트로 내려주는 값을 의미하며 사실 부모컴포넌트 입장에서는 state임전역관리를 해주는 context API나 redux 등을 이용하지 않는다면 props drilling의 모습을 띌 수 있어 전역상태를 관리해 줄 수있는 방법에 대해서는 무조건 강구를 하는게 좋겠다.

 

기본적으로 객체의 형태를 띄기때문에 접근 방식은 props.name 과 같은 형식으로 접근해도 되고 구조분해를 통해서 접근해도 된다.

 

// 줄 때 ex) App.jsx
<Children name ={} age = {} />

// 받을 때 ex? Childern.jsx
const Children({name, age}) {
	return (
    	consol.log(name, age)
    )
}

// 구조분해를 통해서 저렇게 받아도 됨

 

---

 state

state란?

변하는 값을 의미하며 보통 useState(Hook)을 통해서 관리를 하며 이 state의 변화를 통해서 리랜더링이 결정된다고 본다. 값으로 뭐든 올 수 있는 잘 먹는 녀석이다.props와의 가장 큰 차이점은 props는 함수의 매개변수처럼 사용되는 반면 state는 함수 내에서 지역변수처럼 사용된다.

 

랜더링 되는경우props의 변화, state의 변화, 부모컴포넌트가 리랜더링될 때