[React] 리액트(React.js)란?

리액트(React.js)란?

• Facebook(현재 Meta)에서 UI 개발에 초점을 맞춰 만든 프론트엔드, Javascript 라이브러리
• 복잡하고 동적인 웹 페이지 개발 시 사용이 용이하여 프론트엔드 개발자들이 많이 사용하는 대표적인 라이브러리

 

---

리액트(React.js)의 특징

1. Virtual DOM

💡

DOM(Document Object Model) 이란?

- 웹페이지 문서(HTML)를 브라우저가 이해할 수 있도록 트리 구조의 노드로 표현한 것.
- HTML문서의 계층적 구조와 정보를 표현함.

• JS 이벤트 처리로 DOM에 잦은 업데이트가 필요한 경우, 브라우저는 수많은 연산을 수행 => 성능 저하 문제
• 따라서, 메모리에 가상으로 Virtual DOM을 만들어 DOM에 필요한 수많은 연산을 모아 한번에 수행시킨다.
• 기존의 DOM과 비교하여 업데이트가 필요한 부분만 실제 DOM에 패치시켜 빠른 성능을 유지할 수 있다.

 

결론 : 최소한의 DOM조작이 가능해 신속하게 UI 업데이트를 가능하게하고, 성능을 최적화 시킴

 

 

2. 선언형 프로그래밍

• 리액트는 Javascript + XML 형태인 JSX문법을 사용한다.
• JSX는 어떠한 컴포넌트를 만드는 과정을 하나하나 코딩하는 방식이 아닌, 어떤 컴포넌트를 만들것인지 코드에 명시하는 프로그래밍이다.
• 코드의 목적성이 확실해 해석이 쉽다는 특징이 있다.

 

3. 컴포넌트 기반

• 컴포넌트(Component) : 재사용이 가능한 각각의 독립된 모듈
• UI 개발시 컴포넌트를 조립하여 하나의 완성품을 만드는 것이라고 볼 수 있다.

• 중복되는 코드를 줄일 수 있음
• 유지보수가 쉬워짐
• Shotgun Surgery (1개의 에러가 수많은 파일들을 동시에 수정하게 만드는 상황)를 피할 수 있음

 

4. 단방향 데이터 흐름

 

💡

데이터 바인딩 (Data-Binding) 이란?

- 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화 하는 것

 

• 리액트는 Javascript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화 한다.
• HTML에서 JS로 직접적인 데이터 갱신은 불가. 사용자가 변수를 변경할 수 없음.
• JS로 '이벤트 함수'를 걸어두고 사용자의 변경을 감지하여 값을 바꿀 수 있다.
• 성능 저하 없이 DOM을 렌더링 시켜준다.
• 변화된 값을 매번 감지하고 바인딩 하기 때문에 코드가 길어진다.

 

 

 

참조

[강의] 인프런 - 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
https://adjh54.tistory.com/49