프론트엔드 개발을 시작하면서 가장 많이 접하게 되는 라이브러리 중 하나가 React다.
“React가 무엇이고, 왜 쓰는 걸까?”
React란?
React JavaScript 라이브러리 Meta에서 개발했고, 지금은 전 세계 다양한 웹 서비스에서 사용하고 있다.
React는 사용자 인터페이스(UI)를 구현하기 위한 라이브러리다.
- 선언형 (Declarative): UI를 상태에 따라 무엇을 그려야 하는지 선언.
- 컴포넌트 기반 (Component-Based): UI를 재사용 가능한 컴포넌트 단위로 나눈다.
- Virtual DOM을 사용하여 성능을 최적화한다.
왜 React를 사용하는가?
- UI를 작은 단위로 나누어 관리하여 유지보수가 쉽다.
- Virtual DOM을 통해 최소한의 실제 DOM 조작한다.
- 상태가 바뀌면 자동으로 UI가 반영되어 복잡한 로직을 단순화.
React의 핵심 요소
1. JSX
- JavaScript 안에서 XML을 추가한 확장된 문법.
- createElement()를 대체하는 문법적 설탕
const element = <h1>Hello React</h1>;JSX는 Babel과 같은 컴파일러를 통해 JavaScript 코드로 변환됩니다.
React.createElement("h1", null, "Hello React");2. 컴포넌트 (Component)
- UI의 재사용 가능한 단위
- 함수형 컴포넌트(Function Component)가 주류
function Welcome(props) {
return <h1>Welcome, {props.name}</h1>;
}3. Props and State
React는 UI 상태를 state와 props를 통해 관리하며, 중요한 원칙 중 하나는 단방향 데이터 흐름이다.
항상 부모에서 자식으로만 흐르기 때문에,
- 데이터의 흐름이 명확하여 디버깅이 쉬움
- 유지보수성 향상
- 외부에 의존하지 않고 props만으로 작동(재사용 용이)
| 항목 | Props | State |
|---|---|---|
| 데이터 소유 | 부모 → 자식 전달 | 컴포넌트 내부 소유 |
| 변경 가능 여부 | 읽기 전용 | 변경 가능 |
| 용도 | 재사용, 설정값 전달 | UI 상태 관리 |
4. Virtual DOM
메모리 내에 가상으로 존재하는 DOM을 의미한다.
- 매번 변경 사항을 직접 DOM에 반영하는 것은 느리다.
- React는 DOM을 직접 조작하지 않고 Virtual DOM이라는 메모리 상의 트리를 사용한다.
- 메모리에 있는 Virtual DOM을 변경하고 이전 Virtual DOM과 비교하여 변경사항만 최소한으로 실제 DOM에 반영하여 성능을 최적화한다.
동작 흐름
- 상태 변화 발생
- 새로운 Virtual DOM 생성
- 이전 Virtual DOM과 비교(diff)
- 실제 DOM에 최소한의 변경만 적용
이런 비교 과정을 Reconciliation(재조정)이라고 하고 비교하는 알고리즘을 Diffing이라 한다.
참고자료
https://velog.io/@jini_eun/React-React.js란-간단-정리
안녕하세요