[ React/ 원리 ] Basic, DOM by declarative DOM(선언적 DOM)

목차

1. 명령적 코드 vs 선언적 코드

2. 어떻게 React는 버추얼 돔으로 HTML을 그리는가
2-1. POJO code
2-2. Component
2-3. Props
2-4. JSX
2-5. FRAGMENT & HTML AUTHORING
2-6. FIBER AND RECONCILIATION

 

HTML TREE

children that is one object knows where another object is located in memory we represent that visually some arrows.

 

 

The Document Object Model(DOM)

a collection of objects in the comuputer's memory that represent the HTML elements that define a web page.

 

 

Application Programming Interface(API)

the functions, objects, URls, etc. that define how a program can be communicated with. API is how we allow our program to be talked to by other programs. Inside the browser is a lot of code the. The code that defineds the DOM is part of that code.

 

 

the document object is part of the browser apis. It's not part of the JavaScript engine. Naturally it's provided by the browser there are various functions inside the document object like being able to get a reference to one of those Dom elements in the tree.

document object  =< browser apis

 

ex. settimeout function is another browser API. it's not par of the JavaScript engine(standard).

 

Extra Browser API info

Browser APIs

출처 : 얄팍한 코딩사전

DOM(document) meaing

 

 

Imperative programming vs Declarative programming

- vanilla JS 처럼 한개  한개 내가 다 알려줘야 실행되는 코드

 

Imperative vs Declarative

Imperative programming(명령형) =>  every single order step by step

a style of programming in which you describe how a program should accomplish a task.

Declarative programming(선언형) => Talking a step away an abstraction above impertive programming

• a style of programming in which you describe what you want the program to accomplish without describing how.
• a declarative system is alwasys built on top of an imperative one.

const countApp => imperative way

function setCount() => declarative way

 

---

---

 

React update element via POJO

Recursion

- a function calling itself.
i write a function wnd withinthe body of the function. i call that same function that's being run. for example I might have a function A and in the body of functuion A. I calls funation A. This is possible because by the time the function is auctually excuted it exists. It can reference itself essentially(But the action will be running out of memoy).

 

Traverse

To move across or through something. In the case of a tree data structure we mean to move from element to element, that is from parent to child to sibiling, etc.

 

 

How Vitural DOM works

Plain Old Javascript Object(POJOS)

Simple collections of name/value pairs.

vitual DOM

this shape doesn't be understanded by the real DOM.

You could think about this object as declarative code.

 

This is how the vitualDOM works by declarative programming code.

=> 하나 하나 코드를 등록하는 게 아니라 한 방에 POJO를 등록하는 방식

const main = document.getElementById("main");

function addElements (pojoElement, parentDOMNode) {
  let newDOMNode = pojoElement.type === "text" ? document.createTextNode(pojoElement.value)
    : document.createElement(pojoElement.type)
   
      if(pojoElement.children){
          pojoElement.children.forEach((child)=>{
            addElements(child, newDOMNode);
          })
      }
    parentDOMNode.appendChild(newDOMNode);
}

 addElements(markup, main);

 

 

---

 

How to update Vitual DOM

The goal is simply to create plain old JavaScirpt objects. What react is calling react elements. JavaScript objects that react has defined to reprsent real DOM elements or collections of real DOM elements.

plain old object  = a function. In here is the function App().

 

const rootNode = document.getElementById("app");
const root = ReactDOM.createRoot(rootNode); //여기서부터 vitual DOM을 만들어 갈 것이라는 뜻.
root.render(React.createElement(App));

function App() {
  return React.createElement("button", null, "Click me");
}

 

 

root.render(React.creatElement(App));

=> Here is the function to call. We'll treat the function as its own basic object in JavaSciprt functions are objects. React will then know what fuction to call. It can look at the element that it creates and figure out what to do.

console.log(React.createElement(App)

 

props(vitural DOM의 childern)

console.log((App()))

 

Conclusion

a tree of react elements is a tree of simple objects which define types and a type coulb be a function or a type coulb be essentially a string which will represent real DOM elements or representr a function that needs to be called so we can get even more react elements out of it.

 

 

 

---

 

From POJOs to Browser(JavaScript code first -> React code second)

React renders a react tree or a react elements tree that is it creates or renders this tree of react elements.

React does its works asynchrounusly that means it uses a browswer feature.

I'm only going to start running my impereative code once the JavaScript engin is available.
=> It's going to run the rest of my JavaScript code first then the browser will that'done and the code and react has added some other JavaScritpt Code to run once the engine is available to be used.

 

React does that the screen doesnt end up being frozen while it's doing all these DOM updates before any other JavaScript code that we've written runs. It's trying to make sure that its code doesnt block the user. Block user from interacting with the page and Block other code from running.

 

 

---

---

 

React DOM UPDATE

imperative code working of updating the DOM from React code

 

it looks like react is adding its own properties to the DOM elements before it attaches them to the real DOM. in fact it's attaching references to the matching react elementary

 

 

component

In React, a function component is a function that returens a React Element( which may contain other React Elements). It is intended to be called by React.

Components, by their nature, are reusuable, but you likely won't reuse every one

 

 

PROPS

we usually don't just call functions by themselves. Functions often can be passed arguments. Functions have prarameters. I can give a function an argument the parameter. The parameter gets that value and then I can use those value inside the function.

 

props.name  to be frozend by React

immutability : unable to be changed

props.name => 수정 불가능  // {name} =>  수정 가능

 

 

 

 

Re-render

in each calse each time react rendered it looked at the current DOM tree the real DOM tree and updated it match

 

 

ELEMENT PROPERTIES

It will look at the properties of this simple react JavaScript element object and create a DOM object a real DOM with attributes that match.

 

 

JSX through Babel

Transpilation

Transforming(chaning) the text of code written in on syntex and coverting it into a different syntax that does the same thing.
Sometimes a "transpiler" is referred to as a "transformer".

 

Babel

Babel transpiler has read the text of my code and coverted it to something that Javascript can accept that can run

 

 

 

 

 

FRAGMENT & HTML AUTHORING

div

The div element has no special meanding at all. It represents its childern. It can be used with the calss, lang, and title attribute to mark up semantic common to a group of consecutive elements. It can also be used in a dl element, wrapping group of dt and dd element.

출처 : https://html.spec.whatwg.org/#the-div-element

 

 

 

 

 

출처

https://www.youtube.com/watch?v=mFawNZz_Uu0