React(리액트)의 특징

우리 멋쟁이 리액트는 어떤 특징을 갖고 있어서 웹 개발자들이 좋아하는 걸까나~

리액트의 특징을 설명하기에 앞서서  React(리액트)는 페이스북에서 개발한 오픈 소스 자바스크립트 라이브러리로 사용자 인터페이스를 구축하기 위한 주요 도구 중 하나에요

 

우리는 리액트로 프로젝트를 개발하기 전에 리액트가 어떤 특징을 갖고 있는지에 대해서 알 필요가 있다고 생각해요!

1. 선언적 프로그래밍이 가능하다

프로그래밍에는 선언형이냐 명령형이냐 2가지가 있습니다.

명령형 프로그래밍은 프로그래밍을 할 때 어떻게 할 것인가?

선언형 프로그래밍은 프로그래밍을 할 때 무엇을 할 것인가?

 

한가지를 예를 들면 

개발자는 화면에 어떤 요소들이 표시되어야 하는지를 선언하고, 리액트가 내부적으로 이를 처리하여 최적의 방식으로 화면을 업데이트합니다. 이것은 개발자가 각각의 화면 상태에 대해 직접 제어하는 것보다 훨씬 추상화되어 있습니다. 선언적 프로그래밍은 무엇을 원하는지에 초점을 맞춰 개발자가 코드를 작성할 수 있도록 합니다.

 

 

 

2. 컴포넌트 기반

먼저 Component란

리액트 컴포넌트는 재사용 가능한 UI 조각입니다. 이들은 독립적이며, 각자의 상태와 속성을 가지고 화면에 렌더링됩니다. 이를 조합하여 웹 애플리케이션을 구축할 수 있습니다.

 

이 말을 쉽게하면 우리는 앞으로 개발하면서 Header, Nav, Main, Footer를 한번에 넣어서 개발하지 않고 Header Component, Nav Component, Main Component, Footer Component로 나눠서 개발을 할 것입니다.

각 부분의 독립된 컴포넌트를 만들고, 만든 컴포넌트를 조립하여 화면을 구성 할 것입니다.

(간단하게 레고를 생각하시면 될 것 같습니다. 우리가 레고를 만들 때 무엇을 만들 것인지 생각하고 블록을 조립하는 것과 동일하다고 생각하시면 됩니다.) 

 

예시를 위한 그림입니다.

 

3. Virtual Dom (가상 돔)

DOM은 html, CSS, Javascript 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리 해줍니다.
React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있다.

 

Virtual Dom (가상 돔)은 간단하게 설명하면 ui 업데이트를 효울적으로 관리하여 성능을 향상시키고 개발자가 더 나은 사용자 경험을 할 수 있도록 제공합니다.

 

Virtual Dom (가상 돔)을 사용하면 브라주어에서의 실제 DOM 조작이 최소화되므로, 화면의 업데이트가 빠르고 효율적입니다. 이는 사용자의 경험을 향상시키고 웹 애플케이션의 성능을 최적화 하는데 큰 장점이 있습니다

4. JSX

JSX는 리액트에서 사용하는 문법으로 Javascript와 XML을 결합한 확장 문법입니다

리액트에서는 JSX문법이 필수적인 요소는 아니지만, JSX를 사용하면 코드가 간결해지고 가독성이 높아집니다.

 

5. Props and State

props란 데이터를 부모로부터 자식으로 내려주는 것을 말합니다.

즉 이 말은 자식 컴포넌트에서는 데이터 변경이 불가능하고 최상위 부모 컴포넌트에서만 데이터 변경이 가능합니다

 

state란 컴포넌트 내부에서 선언하고 내부에서 값을 변경할 수 있습니다. state는 동적인 데이터 (실시간 처리데이터)를 다룰 때 사용하며 상호작용을 통해 데이터를 동적으로 변경 할 때 사용됩니다.

 

6. 단방향 데이터

리액트는 데이터가 단방향으로 흐르기 때문에 데이터 흐름 추적이 쉽니다.

개발할 때 프로젝트의 크기가 커질수록 데이터 흐름을 추적하기 힘든데 단 방향이기 때문에 흐름을 파악하기 쉽습니다.

 

---

이 처럼  React(리액트)에서는 제가 위에 적은 특징들 외에도 많이 있습니다. 저도 더 찾아 볼 생각이구요.  다음은 리액트의 단장점에 대해서 생각하고 적어보도록 하겠습니다.

 

오늘도 제 글을 읽어주셔서 감사합니다. 

제가 잘못 이해한 부분이 있다면 언제나 태클걸어주십쇼!