리액트(React)란? 🧐

리액트(React)란?

Facebook에서 주도하여 개발한 웹 어플리케이션의 UI를 효과적으로 구축하기 위해 사용하는 Javascript 기반 라이브러리

• SPA(Single Page Application) 인터페이스(Interface)를 구현하는데 집중되어있다.
• 페이지를 다시 로드하지 않고 데이터를 변경할 수 있도록 가상 돔(Virtual DOM)을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리이다.

SPA(Single Page Application) 🤔
웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현

---

리액트(React) 특징?

1.1 가상 돔 (Virtual DOM)

DOM은 애플리케이션의 전체 UI를 나타내며 트리 데이터 구조로 표현된다. 여기에는 Web Document에 있는 각 UI 요소에 대한 노드가 포함된다. 웹 개발자가 자바스크립트를 통해 콘텐츠를 수정할 수 있기 때문에 매우 유용하며 구조화된 형식을 되어 있어 특정 대상을 선택할 수 있고, 모든 코드 작업이 훨씬 쉬워지기 때문에 많은 도움이 된다.

돔(DOM) 🤔
웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것

🚨 돔(DOM)의 문제점
DOM은 트리 구조로 되어 있어서 이해하기 쉽지만, 노드의 수가 많아질 수록 속도가 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있다.

가상 돔(Virtual DOM)
이벤트가 발생할 때마다 가상 돔(Virtual DOM)을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선

1.2 단방향 데이터 바인딩 (One-Way Data Binding)

데이터 바인딩 🤔
두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다. 즉, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것을 뜻 한다.

양방향 데이터 바인딩(Two-way binding) 🤔
사용자 UI의 데이터 변경을 감시하는 Watcher와 자바스크립트 데이터의 변경을 감시하는 Watcher가 UI와 자바스크립트 데이터를 자동으로 동기화 시켜주는 방식

이를 통해 프로그래머는 자바스크립트내에 데이터를 변경과 사용자 UI에 데이터 변경에 관한 동기화를 신경쓰지 않고 프로그램을 작성할 수 있다.

🚨 양방향 데이터 바인딩 단점

• 하나에 데이터 동기화에 두 개의 Watcher가 사용되고, 데이터 많아지게 되면 이 데이터의 동기화를 위한 수많은 Watcher가 생성되므로, 반대로 성능 저하가 발생할 수 있다.

이러한 단점으로 인해, 리액트 등 다른 프레임워크는 단방향 데이터 바인딩을 사용한다.

단방향 데이터 바인딩
단 하나의 Watcher가 자바스크립트의 데이터 갱신을 감지하여 사용자의 UI 데이터를 갱신한다. 사용자가 UI를 통해 자바스크립트의 데이터를 갱신할 때는, 이벤트를 통해 갱신하게 된다.

🚨 단방향 데이터 바인딩 장점

• 양방형 데이터 바인딩이 가지는 성능적인 이슈 해결
• 데이터를 확실하게 추적할 수 있음

1.3 JSX 문법

JavaScript와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어(Template Lanhuage)

JSX 문법의 특징

• 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야한다.
• class 대신 className을 사용한다.
• 모든 태그는 반드시 닫혀 있어야 한다.
• JSX 안에서 JavaScript 값을 사용할 때엔 중괄호를 사용한다.
• JSX 주석은 {/* 텍스트 내용 */} 내용을 감싼다.

1.4 컴포넌트 기반(Component)

리액트는 웹 서비스 개발 시 컴포넌트로 구성되어 있어 사용자에게 보여지는 요소를 컴포넌트 단위로 구분하여 UI를 구성하게 된다.

컴포넌트(Component) 🤔
웹 페이지에서 컴포넌트는 화면을 이루는 작은 요소들이다.

• 기능과 역할에 따른 독립적인 관리가 가능하다.
• 코드의 재사용성이 좋아 개발 생산성이 향상된다.
• 테스트 및 코드 유지보수에 용이하다.

1.5 Props and State

✔ Props
Props(Properties)는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터 (컴포넌트에서 컴포넌트로 전달하는 데이터)

• 부모 컴포넌트로부터 받는 데이터이므로 자식 컴포넌트에서는 변경할 수 없으며 한 컴포넌트의 속성(Properties)과 같음을 의미한다.

✔ State
State는 하나의 컴포넌트 안에서 유동적인 데이터를 다룰 때 사용 (컴포넌트 내부의 동적 데이터)

• 컴포넌트 안에서 데이터를 변경할 수 있으며, 한 컴포넌트의 상태(State)를 나타냅니다.

---

🔗 참고

https://sungjk.github.io/2015/11/22/AngularJS(2).html
https://dev-yakuza.posstree.com/ko/react/create-react-app/react/
https://doqtqu.tistory.com/316