리액트(React)

먼저 리액트가 뭔지부터 알아야 합니다. 

리액트는 웹 프레임워크로, JS 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 그냥 쉽게 설명하자면 웹사이트나 앱의 화면을 만드는 데 사용되는 도구이다. 웹사이트에서 버튼을 누르거나 메뉴를 클릭했을 때 화면이 바뀌죠?

이처럼 사용자가 볼 수 있는 다양한 화면을 쉽고 빠르게 만들 수 있도록 도와주는 JS 언어의 도구가 바로 리액트다.

---

 

그래서 리액트를 왜 사용하는가?

위에서 했던 말을 정리해서 말하자면 react를 사용하면 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 이용한다.

 

 

리액트는 SPA방식을 사용한다

SPA가 무엇이냐? SPA는 Single Page Application의 약자로 서버로 부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹애플리케이션이나 웹사이트를 말한다. 

즉, 다시 말해 SPA는 지속적인 페이지 새로고침없이 유연하고 반응이 빠른 웹앱을 만드는 방식이라고 할 수 있다

 

 

이제 리액트의 특징을 간단하게 알아가보자

 

1. Component 기반으로 이루어져 있다.

리액트는 한 페이지 안에 독립된 작은 Component들을 만들고 이를 조립하여 화면을 구성한다. import를 통해 아주 쉽게 컴포넌트를 추가하여 사용할 수 있으며, 애플리케이션이 복잡하더라도 코드의 유지보수 및 관리가 용이하다.

 

리액트 컴포넌트는 두 가지 방식으로 컴포넌트를 생성한다.

- 클래스형 컴포넌트

- 함수형 컴포넌트

 

 

2. Virtual Dom(가상돔) 기반으로 가볍다.

일단 먼저 돔(DOM)이 무엇인지 알아보자.

DOM은 Document Object Model의 약자로 웹페이지를 이루는 태그들을 JS가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.

 

자, 그래서 가상돔(Virtual DOM) 이 무엇인가?

실제 돔(DOM)의 가볍고 메모리에 존재하는 복사본이라고 할 수 있다.

 

3. 단방향 데이터 바인딩

일단 먼저 데이터 바인딩에 대해 먼저 알아보자.

 

데이터 바인딩이란?

두 데이터 또는 소스를 모두 일치시키는 기법으로, 화면에 보이는 데이터와 브라우저에 있는 데이터를 일치시킨다.

 

자, 그래서 단방향 데이터 바인딩이 무엇인가?

부모 컴포넌트에서 자식 컴포넌트로 전달하는 데이터 흐름이다.

 

 

장점

1. 예측 가능성: 데이터가 항상 한 방향으로만 흐르기 때문에 코드의 흐름을 예측하기 쉽다.

2. 성능 향상: 양방향 바인딩에 비해 데이터 변경 시 UI 업데이트가 한쪽 방향으로만 이루어 지므로, 불필요한 성능저하를 방지할 수 있다.

3. 단순성: 코드 구조를 단순하게 유지할 수 있다.

4. 명확한 상태 관리: 상태 변경이 데이터 모델에서 UI로만 전달되므로, 애플리케이션의 상태를 추적하고 관리하는 것이 더 간편하다.