리액트(React)
리액트는 사용자 인터페이스를 설계할 때 사용하는 유명한 라이브러리다. 페이스북은 데이터를 기반으로 하는 대규모 웹사이트를 서비스하면서 발생하는 여러 문제를 해결하기 위해 2013년에 리액트를 만들었다.
기존의 라이브러리나 프레임워크와 달리 MVC패턴이 아닌 그 중에서도 View에만 집중한 라이브러리이다.
리액트 특징
- 자바스크립트 기반
리액트는 자바스크립트 기반으로 별도의 프레임워크를 배울 필요가 없으며, 자바스크립트를 그대로 활용하면 된다. 앵귤러나 뷰처럼 다른 언어를 배울 필요가 없기 때문에 자바스크립트와 HTML을 조금 아는 정도로 개발이 가능하다. - 선언형
사용자 인터페이스를 만들 때 쉽고 간결하게 해준다. 애플리케이션 안에서 각각 상태에 따른 디자인 뷰와 연결된 데이터가 변경되면, 이에 맞는 컴포넌트들을 올바르게 렌더링해 화면 구성을 해준다. 이처럼 선언형의 화면뷰는 예측 가능한 코드 및 쉬운 디버깅을 하게 해준다. - 가상DOM
DOM Tree와 같은 구조체를 Virtual DOM으로 가진다. DOM을 직접 조작하는 것이 아니라 가상DOM을 조작하기 때문에 효율적이고 빠르다. - 컴포넌트
요소라고 하는 컴포넌트별로 나누어 개발이 가능하다. 이렇게 개발하면 다른 곳에 활용할 수도 있다. 상태를 관리하는 컴포넌트들을 캡슐화해 빌드한 후 그 컴포넌트들을 복잡한 UI로 조합하여 구성이 가능한데, 컴포넌트 로직은 자바스크립트로 구성이 되어있어 애플리케이션을 통한 대량 데이터를 전송 가능하게 하고 DOM의 외부상태를 쉽게 유지할 수도 있다. - 단방향 데이터플로우
데이터가 UI로 흐르는 구조이며, 데이터가 변했을 때 UI가 업데이트 된다. 단방향이므로, UI쪽에서 데이터를 변화시키는 것은 불가능하다. 데이터를 관리하는 컴포넌트가 있고 데이터를 UI컴포넌트에 전달하는 단순한 데이터 흐름으로 이해해 쉽고 편리하게 구현 가능하다.
휘발방지