---

| React.js란 무엇인가?

---

React는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 웹/앱(RN)의 View를 개발할 수 있도록 하는 라이브러리이다.

❔ 왜 리액트를 사용할까?

javaScript를 사용하여 HTML로 구성한 UI를 제어하기 위해서는 특정 DOM을 선택한 뒤, 특정 이벤트가 발생하면 변화를 주도록 설정해야 한다. 따라서 사용자와 인터랙셔니 자주 발생하여 동적으로 UI를 구현해야 한다면 관리하기 힘들고, 웹 애플리케이션의 규모가 커질수록 성능 저라의 원인이 될 수 있다.

하지만, 리액트는 Virtual DOM을 사용해서 빠른 성능을 유지하도록 한다. Virtual DOM은 메모리에 가상으로 존재하는 DOM으로 JavaScript의 객체이다. 따라서 작동 성능이 브라우저에서 DOM을 보여주는 것보다 속도가 훨씬 빠르다. 이는 브라우저에 보여지고 있는 DOM과 상태가 업데이트 되어 업데이트가 필요한 곳의 UI를 비교하여 실제 DOM에 패치시켜준다.

🟩 React의 특징

크게 5가지로 구분해 보았다.
1. Data Flow
2. Component 기반 구조
3. Virtual Dom
4. Props and State
5. JSX

1. Data Flow

React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다. 이 특징은 데이터가 Tree구조에서 위 -> 아래, 부모 -> 자식의 방향으로만 흐른다는 것을 의미한다.

2. Component 기반 구조

Component는 독립적인 단위의 소프트웨어 모듈을 말한다.
즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있다.

React는 UI(View)를 여러 컴포넌트(component)를 쪼개서 만든다.
한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성한다.

컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 쉽다.
기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높다. 따라서 코드는 반복해 입력할 필요 없이, 컴포넌트만 import해 사용하면 된다는 간편함이 있으며, 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점을 가집니다.

컴포넌트 구조의 장점 요약

• 구조를 한 눈에 파악하기 쉽다.
• 재사용성이 뛰어나다.
• 컴포넌트만 import하여 사용하면 되므로 간편하다.

3. Virtual DOM

먼저 DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리한다.

React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있다.

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

4. Props and State

• Props
  Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다.
  쉽게 읽기 전용 데이터라고 생각하면 될 것 같다. 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.

• State
  State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적이다.

5. JSX

리액트에서는 JSX라는 독특한 문법을 가지고 있습니다. JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어(Template language)이다.

const App = () => {
  const hello = 'Hello world!';
  return <div>{hello}</div>;
};

리액트는 위와 같이 자바스크립트에서 HTML 태그를 사용할 수 있으며, 자바스크립트 변수를 HTML 태그에서 바로 호출하여 사용할 수 있습니다.

📍 React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.