리액트의 개념과 장점
리액트는 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리로 싱글 페이지 어플리케이션(SPA) 제작을 위해 페이스북에서 개발하였다. 리액트는 크게 선언형, 컴포넌트 기반, 범용성의 3가지 특징을 가진다.
선언형(declarative)이라는 것은 '명령형(imperative)'과 반대되는 개념으로 리액트는 <div></div>와 같은 JSX문법을 이용해 손쉽게 컴포넌트를 구현하며 document.createElement등의 알고리즘을 구현할 필요가 없다. 이러한 특성은 화면 설계에만 집중할 수 있도록 도와준다는 장점이 있으며, 선언형 프로그래밍과 명령형 프로그래밍에 대한 비교는 이 글에서 잘 설명하고 있다.
컴포넌트는 하나의 기능을 가지는 독립된 모듈로 높은 재사용성을 특징으로 한다. 이러한 컴포넌트를 기반으로 설계하면 기능 자체에 집중해 개발할 수 있고 유지보수가 수월해지는 장점이 있다.
리액트는 다른 프레임워크와 달리 생태계에 종속되지 않으며 리액트 네이티브를 이용한 모바일 개발도 가능하다. 이러한 범용성은 많은 개발자가 리액트를 사용하는 이유이기도 하다.
관심사 분리?
우리는 HTML을 다루면서 관심사 분리 개념을 통해 HTML과 CSS, JS가 관심사 별로 각기 다른 분야를 담당한 것을 배웠다. 리액트는 자바스크립트 안에서 HTML 태그의 형태와 비슷한 JSX 문법을 사용하기에 이러한 관심사 분리 개념과 반대되는 것으로 보일 수 있다.
그러나 실제로 '관심사'란 다양하게 정의될 수 있다. 리액트는 기술이 아닌 기능을 중심으로 컴포넌트별 관심사를 분리하여 관심사 분리 원칙을 더욱 실질적으로 지키고 있다. 이와 같은 컴포넌트는 '느슨한 결합(Loose Coupling)'으로 연결되어 각각 독립적으로 작동한다. 여기서 느슨한 결합은 강한 결합(Tight Coupling)과 반대되는 개념으로 강한 결합이 객체 간의 높은 의존성을 가지는 것과 반대로 느슨한 결합은 컴포넌트 간의 내부 의존성을 줄이는 것을 추구한다.
참고
리액트 공식문서
위키백과 - 리액트 (웹 프레임워크)
건앤로즈님의 블로그 - 느슨한 결합과 강한 결합 ( Loose Coupling VS Tight Coupling ) 이란?
