데이터를 그리기 위한 Front_End 언어 공부하기 : React _ 01

Data-Forge : 데이터로 세상 이해해보기.·2025년 4월 6일

데이터를 그리기 위한 Front_End : React & Next

목록 보기

3/7

데이터를 그리기 위한 FrontEnd 언어 공부하기 : React 01 = React란 무엇인가??

▽ React _ 01 = React란 무엇인가??

목  차

1. 리액트를 사용하는 이유
2. React의 원리.
    2-1. React UI 업데이트 과정.
3. React의  특징.
    3-1. Data Flow(단방향 데이터 바인딩)
    3-2. Component 기반 구조
    3-3. Virtual DOM
    3-4. Props와 State
    3-5. JSX
    3-6. 다른 라이브러리들과의 높은 호환성.
4. React의 장단점.

React.

React란, 사용자가 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JS 라이브러리.
주로 웹 애플리케이션의 인터렉티브한 사용자 인터페이스를 구축하는 데 사용됩니다.

"컴포넌트"라고 불리는 작고 고립된 코드의 파편을 활용해 복잡한 UI를 구성하도록 합니다.

1. 리액트를 사용하는 이유.

리액트는 JavaScript 라이브러리로, 주로 웹 애플리케이션의 인터랙티브한 사용자 인터페이스를 구축하는 데 사용됩니다.

리액트를 사용하는 주요 이유는 다음과 같습니다.

고성능 렌더링:
- 리액트는 Virtual DOM을 사용하여 DOM 조작을 최적화하여 빠른 렌더링을 제공합니다.
재사용 가능한 컴포넌트:
- 리액트는 Component 기반 구조를 통해 코드의 재사용성을 높이고, 유지보수를 쉽게 합니다.
큰 커뮤니티:
- 리액트는 활발한 커뮤니티와 다양한 라이브러리 및 도구를 제공하여 개발 효율성을 높입니다.
유연성:
- 리액트는 다양한 플랫폼과 기술과 쉽게 통합될 수 있습니다.

실무적 예시.

Airbnb:
- Airbnb는 리액트를 사용하여 검색 엔진을 구축하고, 동적 필터링과 표시를 페이지 리프레시 없이 처리할 수 있게 했습니다.
Walmart:
- Walmart은 리액트를 통해 온라인 쇼핑 경험을 개선하고,
  코드 재사용성을 높여 개발 속도를 향상시켰습니다.

React는 개발자들이 복잡한 UI를 쉽게 관리할 수 있도록 해줍니다.

특히, "Component 기반 구조" 덕분에 코드의 재사용성이 높아져 유비조수가 용이합니다.
또한, 'Virtual DOM'을 통해 성능 최적화가 가능해져 대규모 트래픽에도 안정적으로 대응 가능합니다.

2. React의 원리.

'React'는 "컴포넌트의 상태값이 변경되거나 부모가 재렌더링"되면, 'UI를 자동 업데이트' 해줍니다.

즉!

state, redux store 등의 상태값이 변경되거나, 부모 컴포넌트가 재렌더링 되면
리액트가 해당 컴포넌트 함수를 자동으로 재호출하여 재렌더링 해주는 것.

이 때, '가상 DOM(Virtual DOM)'을 통해 변경된 부분의 UI만 효율적으로 업데이트 해줍니다.

2-1. React UI 업데이트 과정.

React의 UI 업데이트는 'Trigger, Render, Commit' 의 3가지 요소로 이루어지고,
'렌더 단계' 및 '커밋 단계'로 나뉘어집니다.

Trigger:
- 상태나 속성 변경이 발생하면 리액트는 렌더링을 트리거합니다.
Render:
- 리액트는 컴포넌트를 호출하여 새로운 Virtual DOM을 생성합니다.
Commit:
- 리액트는 새로운 Virtual DOM과 이전의 DOM을 비교하여
  필요한 변경 사항만 실제 DOM에 반영합니다.

렌더 단계(Render Phase)

: 렌더링 할 때마다 매번 새로운 가상 DOM 생성.
: 이전 가상 DOM과 비교해 바뀐 부분을 탐색하고, 실제 DOM에 반영할 부분을 결정.

렌더링 트리거:
- 상태나 속성이 변경되면 리액트는 렌더링을 트리거합니다.
- '컴포넌트 함수'를 호출하여 새로운 Virtual DOM을 생성하는 단계입니다.
Virtual DOM 생성 :
- 리액트는 컴포넌트 함수를 호출하여 새로운 Virtual DOM을 생성합니다.
  - 이 과정에서 이전 Virtual DOM과 비교하여 변경된 부분을 탐색하고,
    실제 DOM에 반영할 부분을 결정합니다.
변경 사항 계산 :
- 렌더링 과정에서 리엑트는 'Diffing Algorithym'을 사용하여
- 새로운 Virtual DOM과 이전의 Virtual Dom'을 비교하여
- 실제 DOM에 반영해야 할 변경사하을 계산합니다.

커밋 단계(Commit Phase)

: 렌더 단계를 거쳐 바꾸기로 결정된 부분만 실제 DOM에 반영
: 브라우저는 변경된 실제 DOM을 화면에 뿌림.

DOM 업데이트:
- 렌더링 단계에서 계산된 변경 사항을 실제 DOM에 적용하는 단계입니다.
- 이 과정은 동기적으로 진행되어 UI가 일관성을 유지합니다
DOM 조작 :
- 리액트는 필요한 DOM 노드를 삽입, 삭제, 업데이트하여
  실제 DOM을 최신 상태로 유지합니다
라이프사이클 메서드 실행:
- 커밋 단계에서는
  componentDidMount, componentDidUpdate 같은 라이프사이클 메서드가 실행됩니다

예측 가능성:
- 렌더링과 커밋 단계는 개발자들이 코드를 예측 가능하게 작성할 수 있게 도와줍니다.
- 상태나 속성이 변경될 때만 렌더링이 발생하므로 불필요한 리렌더링을 줄일 수 있습니다.
성능 최적화:
- Virtual DOM을 통해 실제 DOM 조작을 최소화하여 성능을 향상시킵니다.
- 이는 특히 대규모 애플리케이션에서 중요한 역할을 합니다.

3. React의 특징.

3-1. Data Flow(단방향 데이터 바인딩)

React는 "단방향 데이터 바인딩"을 사용하여 데이터가 부모에서 자식으로만 흐르도록 합니다.
- 이는 코드의 예측 가성을 높이고, 디버깅을 쉽게 합니다.
3-2. Component 기반 구조

React는 'Component'를 기본 단위로 사용하여 UI를 구성합니다.
이는 코드의 재사용성과 유지보수 용이성을 높여줍니다.
"Component"란 독립적인 단위의 소프트웨어 모듈을 말합니다.
- React는 화면을 여러 Component로 쪼개서 만듭니다.
- 한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고,
  이 컴포넌트들을 조립해서 화면을 구성합니다.
  - 컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드 파악이 쉽습니다.
  - 기능 단위, UI 단위로 캡슐화 시켜서 코드를 관리하기 때문에 재사용성이 높습니다.

☆ 코드를 반복해 입력할 필요 없이, Component만 import하여 사용하면 된다는 간편함이 있으며, 어플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해집니다.

3-3. Virtual DOM

"DOM"은 html, xml, css 등을 '트리 구조'로 인식하고, 데이터를 객체로 간주하면서 관리합니다.
- React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있습니다.
React는이 'Virtual DOM'을 사용하여
실제 DOM에 대한 조작 및 접근을 최소화하고 렌더링 성능을 향상시킵니다.
- 'Event'가 발생할 때마다 Virtual DOM을 만들고, 그때마다 실제 DOM과 비교하여
  변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해,
  앱의 효율성과 속드를 개선할 수 있습니다.

3-4. Props와 State

Props.

: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는데 사용.

Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터.
자식 컴포넌트에서 전달받은 props는 변경이 불가능하고, props를 전달해준 최상위 부모 컴포넌트만 props를 변경 가능합니다.

State.

: 컴포넌트 내부에서 동적으로 변하는 데이터를 관리하는 데 사용됩니다.

State란 '컴포넌트 내부'에서 선언하며, 내부에서 값을 변경할 수 있습니다.
'State'는 동적인 데이터를 다룰 때 사용하며, 사용자와 상호작용을 통해 데이터를 동적으로 변경할 때 사용합니다.
이는 '클래스형 컴포넌트'에서만 사용 가능하고, 각각의 State는 독립적입니다.

3-5. JSX

: JSX는 HTML과 JS 코드를 결합한 문법으로, 리엑트 컴포넌트를 쉽게 작성할 수 있게 합니다.
'JSX'는 리엑트에서 사용하는 독특한 문법입니다.
JS와 HTML을 동시에 사용하며, HTML에 JS 변수들을 바로 사용할 수 있는 일종의 템플릿 언어입니다.

const App = () => {
  const hello = 'Hello world!';
  return <div>{hello}</div>;
}

3-6. 다른 라이브러리들과의 높은 호환성.

리엑트는 단독으로 사용할 수도 있지만, 주로 다른 라이브러리나 프레임워크와 함께 사용합니다.
- ex) 리엑트 애플리케이션을 개발할 때는 React-Router를 사용해 페이지 간의 전환을 관리하고
  상태 관리를 위해 Redux 또는 React-Recoil 같은 라이브러리를 함께 사용 가능합니다.

4. React의 장단점.

장점.

고성능 렌더링: Virtual DOM을 통해 빠른 렌더링을 제공합니다.
재사용 가능한 컴포넌트: 코드의 재사용성을 높입니다.
큰 커뮤니티: 다양한 리소스와 도구를 제공합니다.
유연성: 다양한 플랫폼과 기술과 쉽게 통합됩니다.

단점.

학습 곡선: JSX와 리액트의 고급 개념이 처음에는 어려울 수 있습니다.
문서화의 부족: 빠른 개발 속도 때문에 문서화가 부족할 수 있습니다.
UI 라이브러리만 제공: 전체 애플리케이션을 구축하기 위해서는 추가적인 라이브러리가 필요합니다.

Data-Forge : 데이터로 세상 이해해보기.

Roll with the punches

이전 포스트

데이터를 그리기 위한 Front_End 언어 공부하기 : React 학습 로드맵.

다음 포스트