WIL(20230410 ~ 20230416) Virtual DOM, props, state

DOM

DOM은 HTML 문서를 객체로 표현한 것이다. DOM은 HTML 문서를 트리 구조로 표현하며, 각각의 노드는 객체이다. DOM은 HTML 문서의 구조를 표현하고, CSS를 통해 스타일을 지정하고, JavaScript를 통해 동적으로 문서를 조작할 수 있다. 

 

Virtual DOM

Virtual DOM은 DOM의 추상화된 개념으로, 실제 DOM에 접근하지 않고 메모리 상에서 빠르게 업데이트를 처리할 수 있다. Virtual DOM은 DOM의 상태를 가지고 있으며, 이를 통해 DOM의 변경 사항을 추적할 수 있다. 그리고 실제 DOM에 접근하지 않기 때문에 빠르게 업데이트를 처리할 수 있다.

---

props란?

props란 Component에서 Component로 전달하는 데이터를 말한다. props를 사용하면 효율적으로 component를 재사용할 수 있다.

부모 component에서 자식 component에서 데이터를 전달해 줄때 사용하는데, 여기서 큰 특징은 자식 컴포넌트는 부모 컨포넌트에게서 내려받은 props의 데이터를 직접 수정할 수 없는 것이다.

React는 단반향 데이터로, 데이터가 한 방향으로만 흐르기 때문이다. 

(반면 state는 컴포넌트 내부에서 선언하는 값으로 해당 컴포넌트 안에서 값을 변경할 수 있다.)

 

import React from 'react';

function Name(props){ 
  //App 함수에서 props 불러와서 사용
  return <h1> my name is {props.name} </h1> //점 연산자를 사용한다.
}

function App(){
  return (
    <div>
    	<h1>Hello!!!!</h1>
        <Name name="Jun" /> {/*//props에 값 추가*/}
    </div>
  );
}

export default App;

위 코드를 살펴보면 props는 'name'을 말한다. props인 name의 값으로 'Jun'을 넣어준 것이다. 

이때 넘겨받는 값을 보면 name : 'Jun' 과 같은 객체의 형태로 전달되기 때문에 점 연산자를 사용한 것이다. 

function Name({name}){ 
  //App 함수에서 props 불러와서 사용
  return <h1> my name is {name} </h1> //점 연산자를 사용한다.
}

만약 이와 같이 구조분해할당한 {name}을 인자로 받아오면 점 연산자를 사용하지 않고도 똑같은 결과값이 나오게 된다. 

---

state란?

리엑트에서 state 란 내부에서 동작하는 모든 동적 데이터, 혹은 동적인 상태를 뜻한다. 컴포넌트를 내부적으로 상태 관리할때 사용한다.

리엑트의 state는 정보를 클라이언트 단에 일시적으로 저장하기 위해 만들어졌다.

 

상태 기반은 event trigger 를 기본으로 동작한다. 데이터를 변화시키는게 아니라, 데이터를 state로 취한 후 새로운 객체(state) 를 반환해 새로운 데이터의 상태를 얻는 개념이라고 볼 수 있다.

 

state 자체는 Object 이며 변수나 데이터를 담을 수 있다. 그리고 이 state 에 들어간 데이터는 변경될 수 있다.

 

const [todo, setTodo] = useState([
    { id: 1, title: '리액트 공부하기', comment: '리액트 기초를 공부해봅시다.', isDone: false },
    { id: 2, title: '리액트 공부하기', comment: '리액트 기초를 공부해봅시다.', isDone: true}
  ])

1. state 값을 변경할땐 setstate() 함수 (= 상태관리함수) 를 사용

 

2. setState() 함수는 비동기로 처리된다.

setState() 이후로 연결된 함수들의 실행이 완료된 시점에 화면 동기화 과정을 거친다.