React
웹 애플리케이션의 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리
React 특징
1. 컴포넌트 기반 구조
리액트는 UI를 작은 재사용 가능한 구성 요소인 컴포넌트로 나누어 개발함
- 재사용 가능: 여러 곳에서 동일한 컴포넌트를 사용할 수 있음
- 독립적: 내부 상태와 동작을 자체적으로 가질 수 있음
- 조합 가능: 컴포넌트를 또 다른 컴포넌트 안에 넣어서 큰 UI를 구성할 수 있음
💡 컴포넌트란?
재사용 가능한 코드 블록이자, 하나의 독립적인 UI 조각
2. 가상 DOM (Virtual DOM)
실제 DOM 대신 메모리 상의 가상 DOM을 사용해서 변경사항만 효율적으로 업데이트
리액트가 실제 DOM을 직접 다루지 않고, 메모리 상에서 복사본처럼 관리하는 가짜 DOM
브라우저는 실제 DOM을 조작할 때마다 렌더링을 다시 하기 때문에 시간이 많이 드는데,
리액트는 이걸 피하기 위해 Virtual DOM을 먼저 수정하고, 그 결과만 실제 돔에 최소한만 반영함
🚀 동작 방식
컴포넌트가 업데이트되면 👉🏻 새로운 Virtual DOM을 생성 👉🏻 이전 Virtual DOM과 비교해서 변경된 부분만 파악 👉🏻 변경된 부분만 실제 DOM에 반영
3. 단방향 데이터 흐름(One-way Data Flow)
데이터가 부모 컴포넌트에서 자식 컴포넌트 방향만으로 흐르는 구조
부모 컴포넌트는 props를 통해 자식 컴포넌트에게 값을 넘겨줌
- 예측 가능한 구조: 어디서 데이터가 바뀌는지 추적하기 쉬움
- 디버기 쉬움: 데이터 흐름이 복잡하게 얽히지 않아서 상태 추적이 간단
- 유지보수 편함: 복잡한 앱에서도 데이터 변경 흐름이 일관됨
💡 props란?
props는 "properties"의 줄임말로,
React에서 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용하는 값
즉, 외부에서 컴포넌트로 전달되는 읽기 전용 값을 의미함
정리
✔️ 컴포넌트 기반 구조
✔️ 가상 DOM
✔️ 단방향 데이터 흐름
Web Developer