[React] 리액트란?

이번에는 자바스크립트 라이브러리 중 하나인 리액트에 대해 알아보겠습니다!

 

 

리액트

먼저, 리액트(React, React.js, ReactJS)는 

자바스크립트 라이브러리 중 하나로 사용자 인터페이스를 만들기 위해 사용됩니다.

또한, 리액트는 SPA(Single Page Application)의 UI를 생성하는데 집중한 라이브러리 입니다.

 

 

리액트의 특징

그렇다면 리액트는 왜 사용할까요? 리액트의 특징을 알아보며 생각해봅시다!

 

1. Component 기반 라이브러리

컴포넌트(Component)는 독립적인 단위의 소프트웨어 모듈을 말합니다.

리액트는 독립된 컴포넌트들을 조립하여 화면을 보여줍니다.

 

리액트는 헤더, 메인 콘텐츠, 네비게이션, 메뉴, 버튼 등 여러 컴포넌트들로 쪼개져 구성할 수 있기 때문에

전체적인 코드를 상대적으로 파악하기 쉽고, 기능이나 화면 구성에 따라 묶어 관리할 수 있습니다.

이러한 독립적인 컴포넌트 구성은 import를 통해 사용할 수 있어 재사용성이 높고

또한, 오류가 생기면 특정 컴포넌트만 수정하여 사용할 수 있기 때문에 유지보수성을 증가시켜 줍니다.

 

2. Virtual DOM

먼저, DOM은 HTML, CSS, XML 등을 트리 구조로 인식하고, 데이터를 객체로 간주하여 관리하는 것입니다.

DOM은 규모가 큰 웹 애플리케이션에서 직접 접근하여 변화를 주다 보면, 다시 레이아웃을 구성하고

렌더링하는데 속도가 늦어지게 됩니다.

 

리액트에서는 위와 같은 문제점을 가상 돔을 이용해 해결했습니다.

가상 돔은 실제 돔에 접근하여 조작하는 대신, 추상화시킨 자바스크립트 객체를 이용해 사용하는 것입니다.

데이터가 변할 때, Virtual DOM을 만들어 실제 DOM과 비교하고 전후 상태를 비교합니다.

이후 변경이 필요한 최소한의부분만 실제 DOM에 반영하여 효율성을 높였습니다.

 

3. 단방향 데이터 바인딩

리액트는 데이터의 흐림이 한 방향으로 흐릅니다.

부모 컴포넌트에서 자식 컴포넌트로 한 방향으로 데이터나 내려가며,

자식 컴포넌트에서 부모 컴포넌트로 데이터를 보낼 수 없습니다. 

부모의 데이트를 바꾸기 위해서는 state를 사용해야 합니다.

 

props

부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 의미합니다.

props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있습니다.

 

state

state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다.

state는 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용합니다.

 

4. JSX

리액트에서는 JSX라는 자바스크립트의 확장 문법을 사용합니다.

JSX는 자바스크립트와 HTML을 동시에 사용할 수 있어 편리하고,

자바스크립트 코드를 HTML처럼 표현하기 때문에 가독성이 높습니다.

 

정리

이렇게 리액트는 무엇인지? 리액트는 어떤 특징을 가지고 있는지 알아보았습니다.

이후에는 리액트를 직접 사용하는 방법을 알아보겠습니다!