[React] ① 리액트 기초

리액트란?

리액트(React.js)는 자바스크립트 라이브러리로 보다 편리한 웹 개발을 위해 만들어졌습니다. 페이스북, 디스코드, 페이팔, 넷플릭스 등에서 대규모 애플리케이션을 리액트로 개발하여 운영 중인데요. 리액트는 반응형 웹 유저 인터페이스를 만드는 데 용이하며 확장성이 좋습니다.

리액트와 컴포넌트

리액트는 재사용 가능한 컴포넌트(component)를 통해 각 요소를 구현합니다. 컴포넌트란 무엇일까요? 컴포넌트는 리액트의 핵심 개념으로 자바스크립트 함수입니다.

 

컴포넌트를 통해 관심사를 분리할 수 있으며 이를 원하는 곳에서 재사용할 수 있습니다. 각 컴포넌트는 하나의 정확한 역할을 수행하는데요. 이렇게 컴포넌트를 분리하면 유지 보수와 관리가 용이합니다.

 

정리하자면 리액트의 모든 UI는 개별 컴포넌트(빌딩 블록)를 만들고 이를 조합하여 완성하는 방식으로 구성됩니다.

 

리액트 컴포넌트는 HTML, CSS, JavaScript를 조합하여 만드는데요. 이를 리액트에서는 JSX라는 구문을 통해 조금 다르게 사용합니다.

리액트와 버추얼 DOM

리액트의 큰 특징 중 하나는 바로 버추얼 DOM을 사용한다는 것입니다. DOM(Document Object Model)은 객체로 문서 구조를 표현하는 방법이죠. HTML을 동적으로 제어하는 방법이지만 브라우저에서 처리하기에 무거울 수 있습니다.

 

리액트는 버추얼 DOM 방식을 사용하여 DOM 업데이트를 추상화합니다. 이게 어떤 의미냐면요. 데이터가 업데이트되면 이를 버추얼 DOM에 렌더링하고 현재 내용과 비교하여 바뀐 부분만을 실제 DOM에 전달하는 방식을 사용한다는 것입니다.

 

리액트는 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 필요한 경우에만 DOM을 업데이트합니다. 따라서 브라우저만으로 DOM을 보여주는 것보다 속도가 훨씬 빠릅니다.

마치며

리액트는 자바스크립트 라이브러리입니다. 컴포넌트를 사용하여 각 요소를 구현하며, JSX라는 전용 구문을 사용합니다. 리액트는 버추얼 DOM 방식을 채택하여 보다 빠른 렌더링 속도를 제공합니다.