React : Virtual Dom, props, state

1. DOM(The Document Object Model)이란?

문서 객체 모델(DOM)은 HTML,XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM은 node와 object로 문서를 표현한다. 이들은 웹페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

 

1-1. DOM의 구조

이미지 출처 : TCPSCHOOL.com

1-2. node

HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있습니다. HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해주는 역할을 합니다. HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장됩니다. 이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보여줍니다.노드 트리는 최상위 레벨인 루트 노드(root node)로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려갑니다. 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있습니다.

이미지 출처 : TCPSCHOOL.com

1-3. DOM 조작의 비효율성

어떠한 노드 하나가 데이터가 변경되면 전체 노드들이 처음부터 다시 그려지게 되면서 렌더링이 반복되어 불필요한 조작이 증가하고 성능이 저하되는 문제점이 있다.

최근 SPA(Single Page Application)을 많이 사용하게 되면서 데이터가 변경되는 영역만 부분적으로 데이터를 불러오기 때문에 DOM조작을 더 효율적으로 할 수 있는 방법이 필요해졌다.

 

2. Virtual DOM

Virtual DOM(가상돔)은 “가상” 객체를 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 실제 변경된 부분만 비교하여 부분적으로 업데이트 되므로 속도가 빠르고 성능이 향상됩니다.

3. props(properties) 와 State

1) props :

• 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용(=함수에 전달하는 매개변수)
• 단방향 데이터 흐름을 갖는다.
• 프로퍼티는 수정할 수 없다.

1-1) props 사용방법

• 하위 컴포넌트에 값 전달

import Component from './Component'; // 컴포넌트 연결

function Sample() {
  const text = '리액트 공부를 해보자!';

  return (
    <React.Fragment>
      <Component text={text}/> // text값을 전달
    </React.Fragment>
  );
}

function Component(props) {
  return (
    <React.Fragment>
      <div>{props.text}</div> // 상위 컴포넌트에서 받은 props값을 출력
    </React.Fragment>
  );
}

• props 값을 두 개 이상 전달

import Component from './Component';

function Sample() {
	const text = '리액트 공부를 해보자!';

  return (
    <React.Fragment>
      <Component text={text}></Component>
    </React.Fragment>
  );
}

function Component(props) {
	const {name, children} = props;

  return (
    <React.Fragment>
      <div>{text}</div> 
			<div>{children}</div>
    </React.Fragment>
  );
}

• props 타입 지정해주기

import Component from './Component';

function Sample() {
	const num = 99
	const text = '8기 b반 파이팅!';

  return (
    <React.Fragment>
      <Component num={num} text={text}>항해</Component>
    </React.Fragment>
  );
}

import PropTypes from 'prop-types';

function Component(props) {
  const {num, text, children} = props;

  return (
    <React.Fragment>
      <div>{text}</div>
			<div>{children}</div>
			<div>{num}</div>
    </React.Fragment>
  );
}

Component.propTypes = {
  text: PropTypes.string.isRequired,
  num: PropTypes.number
};

• 다양한 타입 지정 가능
• 타입 종류는 ‣ ← 깃에서 확인
• 주의점
  • props가 Types에서 지정한 타입과 일치하지 않으면 에러 발생
  • 필수값으로 지정된 props를 전달하지 않을 경우에도 에러 발생
  • 따라서 propTypes를 사용한 경우엔 타입과 필수로 설정된 props에 유의하여 사용

 

2) State :

• State는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다.
• 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수 도 있다.
• State 값이 변경되면 React가 자동으로 변경된 값을 계산하여 재렌더링이 일어난다.

 

2-1) State 사용 방법

import { useState } from "react";
 
const App = () => {
    const [value, setValue] = useState(초기값);
    return ...
}

• State값을 변경하기 위해선 반드시 setState 함수를 사용해야 한다.
• State를 임의로 변경하게되면 React가 Componant가 변경된 것을 알아차리지 못해서 재렌더링이 일어나지 않는다.

2-2) State를 변경할 때 주의 사항 : 불변성

const array = [1,2,3,4];
const sameArray = array;
sameArray.push(5);

console.log(array !== sameArray); // false

const sameArray = array; 로 배열을 복사해주게 되면 두 배열이 가리키는 데이터의 주소가 같기 때문에 나중에 sameArray의 데이터를 변경하게 되면 array도 함께 수정되기 때문에 데이터 불변성을 유지하기 어려워짐.

const array = [1,2,3,4];
const differentArray = [...array, 5];

console.log(array !== differentArray); // true

differentArray는 데이터값을 복사해서 새로운 배열을 만들어주기 때문에 데이터 불변성을 유지할 수 있음.

 

 

 

 

---

리액트에서 컴포넌트를 분리하고 props를 내려주는게 아직 좀 헷갈린다...