Virtual DOM, props, state

1. Virtual DOM

React의 장점 중 Virtual DOM
Virtual은 말 그대로 가상이라는 뜻이고, DOM은 Document Object Model의 약자로 그대로 해석하면 문서 객체 모델을 의미
문서 객체한 HTML, head, body와 같은 테그들을 JavaScript가 이용할 수 있는 개체를 의미함
div, input, a등이 DOM에 해당됨

ⅰ. DOM이란?

• DOM(Documet Object Model)은 HTML/XML 문서에 접근하기 위한 인터페이스
• 브라우저는 HTML 문서를 파싱하여 사용자에게 시각화해 줌
  => 여러가지 이유로 브라우저가 띄워주는 HTML 문서에 어떤 동적 처리를 해주고 싶을때, 그 과정을 도와주는 인터페이스가 DOM
• 대표적인 DOM 규격 중 하나인 W3C DOM의 API DOC를 보면 우리가 흔히 아는 getElementByTagName과 같은 메소드를 정의하고 있음

ⅱ. 프로그래머가 DOM을 이용하는 법

• JavaScript는 브라우저에서 Web Api를 이용하고 DOM을 조작하기 위해서 태어난 언어
  => DOM을 조작하기 위해서는 JavaScript를 이용

ⅲ.  Virtual DOM 탄생

• Web의 복잡도가 증가하고 DOM 조작이 빈번하게 일어나게 됨
• 브라우저 렌더링 과정에 따라 DOM의 조작은 브라우저 렌더링 과정을 유발함(렌더 트리 생성, 페인트 등)
• DOM 조작이 많이 발생할 경우 상당히 비효율적
  => 이 상황을 해결하기 위해서 Virtual DOM이 탄생함
• Virtual DOM은 하나의 가상 레이어!!
• Virtual DOM에 적용하는 변경사항은 DOM에 바로 반영되지 않고 그 변경사항들을 모아뒀다가, 한번에 DOM한테 보내게 됨
  => DOM은 업데이트를 딱 한 번만 하면 되고, 그러면 렌더링도 한번만 하면됨
• DOM조작이 아주 빈번한 경우 Virtual DOM은 DOM을 조작하는 것에 비해 효율적으로 동작함
• 단점
  • Virtual DOM의 작동 원리는 하나의 레이어를 더 거쳐가는 동작이기 때문에, DOM조작이 아주 많지 않다면 DOM을 직접 조작하는 것보다 느림
• 사소한 변경사항에도 전체가 리렌더링 되는 DOM은 브라우저에 과부하가 올 수 있기 때문에 Virtual DOM의 역활은 중요함

참조

React 가 Virtual DOM 을 사용하는 이유

 

[React] DOM이란? Virtual DOM을 사용하는 이유?

2. props

ⅰ. props란?

• props(property)란 컴포넌트에서 외부로부터 받는 값을 의미함
• 리액트를 이용하면 컴포넌트 단위의 개발이 가능해지는데 여기서 컴포넌트는 하나의 작은 단위를 조각을 의미함
• 정해진 props를 받고 약속된 형태로 그려냄
• 공통 조각 컴포넌트를 만들어 작업자 입장에서 화면을 만들어내는 시간을 단축 할 수 있음
• 상위 컨포넌트가 하위 컴포넌트에 값을 전달하므로 단방향 데이터 흐름을 갖고 있음
• 부모 컴포넌트는 수정이 가능하지만, 자식은 읽기만 가능함

단방향, 양방향 데이터 바인딩

ⅱ. props 사용하기

• props를 사용하기 위해서는 상위 컴포넌트에서 props를 지정하고, 하위 컴포넌트에서 받은 props값을 렌더링 해야함
  => 상위 컴포넌트에서 하위 컴포넌트로 프로퍼티가 전달되는것을 단방향 데이터 흐름!!

3. state

• state 컴포넌트에 대한 데이터 또는 정보를 포함하는 데 쓰이는 리액트 내장 객체
• 컴포넌트 상태는 시간이 지남에 따라 변경될 수 있음 => 변경될 때마다 컴포넌트가 다시 렌더링 됨
• state 변경은 사용자 작업 또는 시스템 생성 이벤트에 대한 응답으로 발생할 수 있으며 이 변경은 컴포넌트의 동작, 렌더링 방법을 결정함

참조

[React] State란?

이번주는 내내 알고리즘 문제를 풀면서 어떻게 하면 그결과값을 화면에 보여줄수 있는지에 대해서 계속적으로 고민을 할수 있어서 너무 좋았던거 같다.
아직까지는 알고리즘 문제를 너무 오래 고민하고 어떻게 해야지 효율적으로 돌아가고 효율적으로 코드를 짤 수 있는지 정확하게 감이 없는거 같다.
앞으로 알고리즘문제를 이틀에 한문제 정도는 꼭 풀어봐야할것 같다.....
금요일부터 주특기주차가 시작되서 리액트에 대해서 다시 강의를 듣다가 과제를 하고 있는데 리액트를 아에 안한지 너무 오래되서 아무 기억이 없었는데 하면 할수록 어떤 기능을 썻는지는 정확하게 기억을 하지는 못하지만 어떤식으로 만들어야하는지 감은 잡히는것 같아서 다행인거 같다는 생각이 들었다!!!!!!!!