React - Virtual DOM, props, state

React

React 란 무엇일까?

• React is a JavaScript library created by Facebook
• React is a User Interface (UI) library
• React is a tool for building UI components

 

Virtual DOM

React는 UI 구성 요소(Component) 기반 라이브러리입니다. 이 라이브러리는 가상 DOM(Virtual DOM)을 활용하여 애플리케이션 상태(State)가 변경되었을 때 실제 DOM을 업데이트하는 것보다 더 빠르고 효율적인 방식으로 UI를 업데이트합니다. 가상 DOM을 사용하면 React는 이전 DOM 상태와 새로운 DOM 상태를 비교하여 변경 사항만 실제 DOM에 적용할 수 있으므로, 불필요한 렌더링 작업을 최소화할 수 있습니다. 이러한 방법을 통해 React는 빠른 성능과 반응성 있는 UI를 구현할 수 있으며, 이는 사용자 경험(UX)을 향상시키는 데 큰 도움이 됩니다. React는 가상 DOM을 사용하여 렌더링 결과를 계산하고, 이를 실제 DOM과 일치하도록 조작합니다. 이 과정에서 변경된 내용만을 실제 DOM에 적용하므로 성능이 개선되고, 반응성 있는 UI를 구현할 수 있습니다. 이러한 방식을 통해 렌더링 성능을 최적화하는 것이 React의 주요 요소 중 하나이며, 이를 통해 고성능이며 사용자 친화적인 애플리케이션을 만들 수 있습니다.

 

React의 state

React에서 state는 해당 클래스 컴포넌트에서 사용되는 상태 관리 메커니즘이며, 해당 컴포넌트의 상태를 저장하고 업데이트할 수 있는 객체입니다. 상태가 변경되면 React는 변경된 state를 사용하여 해당 컴포넌트를 다시 렌더링합니다.하지만 함수형 컴포넌트에서는 state를 직접 사용할 수 없습니다. 대신 React Hooks 중 하나인 useState를 사용하여 함수형 컴포넌트에서도 상태를 관리할 수 있습니다.useState는 state 값을 저장하고 해당 값을 업데이트하는 함수를 반환하는 Hook입 니다. 이 함수를 호출하면 [state, setState] 형태의 배열이 반환되는데, 첫 번째 요소는 현재 state 값을 나타내고 두 번째 요소는 state 값을 업데이트하는 함수입니다. 함수형 컴포넌트에서도 state 값을 저장하고 업데이트할 수 있으므로 코드를 간결하게 유지할 수 있고, 컴포넌트를 더 간단하게 작성할 수 있습니다.

 

props

React에서 props는 "properties"의 줄임말로, 부모 컴포넌트에서 자식 컴포넌트로 전달하는 데이터를 의미합니다.모든 React 컴포넌트는 props를 통해 데이터를 받고, 이 데이터를 사용하여 내부에서 렌더링되는 값의 동적인 조작이나 렌더링이 가능합니다. props는 읽기 전용이기 때문에 자식 컴포넌트에서 데이터를 수정할 수 없지만, 부모 컴포넌트에서 업데이트하여 데이터를 변경할 수 있습니다. 예를 들어, 다음과 같이 부모 컴포넌트에서 props를 이용하여 자식 컴포넌트에게 데이터를 전달할 수 있습니다.

 

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const name = 'John';
  const age = 25;

  return (
    <div>
      <ChildComponent name={name} age={age} />
    </div>
  );
}

export default ParentComponent;

위 코드에서 ParentComponent는 name과 age라는 두 개의 변수를 가지고 있습니다. 이를 ChildComponent에게 props로 전달하고 있습니다. ChildComponent에서는 전달된 props를 사용하여 화면에 정보를 렌더링할 수 있습니다.

 

import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

export default ChildComponent;

위 코드에서 ChildComponent는 props라는 매개변수를 통해 부모 컴포넌트로부터 전달받은 데이터를 사용합니다. 이를 통해 name과 age 값을 출력하고 있습니다.

 

 

resources:React

https://ko.reactjs.org/docs/faq-state.html

컴포넌트 State – React