[React] React의 핵심 가치

🔹 React 란?

• Facebook에서 만든 JavaScript 라이브러리
• 재사용 가능한 UI 컴포넌트로 빠르고 효율적으로 웹 애플리케이션 구축에 사용
• 단순한 웹사이트부터 대규모 애플리케이션까지 다양하게 활용 가능

 

🔹 React의 핵심 가치

1. 컴포넌트 기반 아키텍처

• 컴포넌트라는 독립적인 UI 단위로 웹 어플리케이션 구성
• 하나의 페이지를 여러 개의 작은 컴포넌트로 나누면 재사용성이 높아지고 유지보수가 쉬워짐

2. 가상 DOM(Virtual DOM)

• 실제 DOM을 직접 조작하는 대신, 가상 DOM을 사용해 성능을 최적화함
• 변경 사항을 메모리 상에서 비교(diffing)한 후, 최소한의 업데이트만 실제 DOM에 반영해서 렌더링 성능을 향상시킴(바뀐 부분만 업데이트)
• 예를 들어, 쇼핑몰에서 장바구니에 추가할 때 전체 페리지가 새로고침되지 않는 이유임

3. 단방향 데이터 흐름(One-way Data Flow)

• 부모 → 자식 방향으로만 데이터가 흐름
• Props를 사용해 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달함

4. 상태 관리(State Management)

• 컴포넌트는 state라는 내부 상태를 가질 수 있음
• useState 훅을 사용하면 동적인 데이터를 다룰 수 있음

5. 정리

• react는 컴포넌트 기반으로 UI를 구성해 유지보수와 확장성이 뛰어남
• 가상 DOM, 단방향 데이터 흐름, 상태관리(useState, Redux)를 통해 성능 최적화 

 

📌 실제 DOM vs 가상 DOM

• DOM 이란?
  • DOM(Document Object Model)은 웹사이트의 화면을 구성하는 요소들(HTML 태그들)을 트리(Tree) 구조로 표현한 것
  • 웹사이트를 만들 때 HTML 코드가 브라우저에서 해석되면서 DOM 구조가 만들어짐
  • 쉽게 말하면, HTML을 브라우저가 이해할 수 있도록 변환한 구조
• 실제 DOM 이란?
  • 일반적으로 사용하는 HTML 태그들로 만들어진 화면 구조, HTML 코드가 브라우저에서 해석되면 실제로 DOM이 만들어짐
  • 실제 DOM 특징: 브라우저가 직접 화면을 그려줌, 변경이 있을 때마다 전체 DOM을 다시 그려야 함 → 느림!, 작은 변경이 생겨도 전체 페이지가 업데이트될 수 있음
• 가상 DOM이란?
  • 실제 DOM을 직접 조작하지 않고, 가짜 DOM(가상 DOM)을 먼저 변경한 후, 필요한 부분만 실제 DOM에 반영하는 방식
  • 동작 방식: 먼저 가상 DOM을 변경 → 변경된 부분만 비교(diffing)한 후, 필요한 부분만 실제 DOM에 반영 → 브라우저는 최소한의 업데이트만 진행하기 때문에 빠름
  • 가상 DOM 특징: 변경된 부분만 찾아서 업데이트 → 빠름, 실제 DOM을 직접 조작하지 않음 → 성능 최적화 가능, 화면이 자주 변경되는 쇼핑몰, SNS, 대시보드 같은 곳에서 유용
• 비교하기 → 버튼을 클릭하면 글자가 바뀌는 경우
  • 실제 DOM 방식(느림): 버튼을 클릭하면 전체 화면이 다시 그려짐 → 변경할 필요 없는 요소도 다시 업데이트됨 → 비효율적
  • 가상 DOM 방식(빠름): 버튼을 클릭하면 가상 DOM에서 먼저 변경함 → 변경된 부분만 찾아서 실제 DOM에 반영 → 불필요한 업데이트를 줄여서 더 빠르게 동작
• 가상 DOM이 중요한 이유
  • 실제 DOM을 직접 조작하면 느림 → React는 가상 DOM을 사용해서 빠르게 업데이트

 

📌 리액트는 비동기일까?

• 리액트의 기본 동작은 “동기적”
  • 리액트는 컴포넌트 기반 UI 라이브러리임
  • 상태(state)가 변경되면 화면이 다시 렌더링 되는 구조를 가지고 있음
  • 하지만 일반적인 동기 코드처럼 한 줄씩 실행됨
• 하지만, 리액트의 상태 업데이트는 "비동기적" 으로 동작함!
  • react의 setState는 비동기적으로 동작할 수 있음
  • 즉, 바로 상태가 변경되지 않고, 한 번에 여러 개의 상태 변경을 모아서 처리함 (여러 번 호출해서 최종적으로 한 번만 상태를 업데이트)
  • 그래서 상태를 업데이트할 때 이전 상태 값을 기반으로 변경하는 함수형 업데이트를 사용함
• 리액트는 "비동기 작업" 을 어떻게 처리할까?
  • 리액트에서는 비동기 작업(예: API 호출, 데이터 요청)을 할 때 useEffect와 fetch 같은 비동기 함수(async/await)를 사용함
  • useEffect 를 사용하면 컴포넌트가 처음 렌더링될 때 API를 호출하고, 데이터를 받아온 후 상태를 업데이트 함
    → 이 과정은 비동기적으로 실행돼서 UI가 멈추지 않고 자연스럽게 데이터를 불러올 수 있음
• 결론: 리액트는 비동기일까 !?
  • 기본적으로 리액트 자체는 동기적으로 동작함
  • 하지만 setState는 비동기적으로 처리될 수 있음(최적화를 위해 한 번에 처리)
  • 비동기 작업(API 호출 등)은 useEffect + async/await 를 활용해서 처리함
    → 즉! 리액트는 기본적으로 동기적이지만, 일부 동작(setState, API 호출 등)은 비동기적으로 처리됨