# 리액트(React)란?
사용자 인터페이스(UI)를 구축하기 위한 선언적이고 효율적이며 유연한 자바스크립트 라이브러리. 컴포넌트라고 불리는 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도우며, 싱글 페이지 애플리케이션(SPA)의 UI를 생성하는 데에 집중한다.
class ShoppingList extends React.Component {
render() {
return (
<div className = "Apple">
<h1>My Apple List</h1>
</div>
);
}
}
여기서 'ShoppingList'를 리액트 컴포넌트 클래스 또는 리액트 컴포넌트 타입이라고 한다. 그리고 이 컴포넌트는 render 함수를 통해 표시할 뷰 계층 구조를 반환한다.
# 리액트(React)의 특징
1. 가상 돔(Virtual DOM)
우선, DOM(Document Object Model)이란 웹 페이지에 대한 인터페이스다. 단순히 HTML 코드가 아닌 브라우저에서 로드되는 것을 말한다. DOM은 동작 하나를 실행할 때마다 페이지가 렌더링* 되는데, 소모하는 시간이 상당하다.
* 렌더링 : 서버로부터 HTML을 받아 브라우저에 뿌리는 과정
예를 들어 이미지를 첨부하는 동작이 일어났을 시, 브라우저에선 HTML 파싱 → DOM 트리 생성 → CSS 파일과 각종 스타일 파싱 → 렌더 트리 생성 → 화면에 출력하는 과정을 수행한다.
그러나 그 후 이미지를 수정하고, 제거하는 어떤 동작이 일어날 때마다 위의 과정을 다시 반복해야 한다. 이것이 DOM의 단점이다.
그리고 그 단점의 해결책으로 Virtual DOM이 나왔는데, 이것은 렌더링을 한 번만 수행한다.
Virtual DOM이 이전 상태와 수정사항을 비교하여 달라진 부분만 Real DOM에게 전달하게 되어 렌더링이 한 번만 진행되는 것이다.
2. 단방향 데이터 바인딩
우선, 양방향 데이터 바인딩이란 사용자 UI 데이터의 변경을 감시하는 Watcher와 자바스크립트 데이터의 변경을 감시하는 Watcher가 UI와 자바스크립트 데이터를 자동으로 동기화 시켜주는 방식을 말한다. 이 방식은 하나의 데이터 동기화에 두 개의 Watcher가 사용되기 때문에 성능 저하가 발생할 수 있다.
리액트는 이러한 문제 때문에 단방향 데이터 바인딩을 사용한다. 하나의 Watcher가 자바스크립트 데이터 갱신을 감지하여 사용자 UI 데이터를 갱신하고, 사용자가 UI를 통해 데이터를 갱신할 때엔 이벤트를 사용하여 갱신한다.
3. JSX(JavaScript XML) 문법
리액트에선 JSX 문법을 사용한다.
const Apple = () => {
const Banana = 'Im Banana!';
return <div>{Banana}</div>;
};
JSX는 자바스크립트와 HTML을 같이 사용하는 문법으로, 자바스크립트 변수를 HTML에서 호출하여 사용하는 게 가능하다.
4. 컴포넌트 단위 기반
리액트는 블록이라고 할 수 있는 컴포넌트들을 조립하여 하나의 완성품을 만들어낸다. 여기서 이 컴포넌트는 여러 부분에서 사용할 수 있다. 예를 들어 여러 곳에 로그인 버튼이 필요한 상황이라면, 하나의 로그인 버튼 컴포넌트를 생성하고 이 컴포넌트를 필요한 곳으로 가져가 사용하면 된다.
5. 수많은 사용
여러 통계 결과나 채용 공고만 보아도 리액트가 얼마나 많이 사용되고 있는지 알 수 있다. 우리가 개발을 하다보면 어쩔 수 없이 오류가 발생하게 되는데, 리액트는 사용자가 많기 때문에 오류를 해결하기 위한 자료를 얻기가 쉽다.
또한, 페이스북에서 계속 업데이트를 해주어 지속적인 개발이 가능하다.
6. React Native 앱 개발
React Native란 리액트를 기반으로 만들어진 모바일 앱을 만들기 위한 프레임워크이다. 그래서 리액트로 프로젝트를 만들어본 개발자라면, 모바일 앱 또한 쉽게 만들 수 있다.
[참고 사이트 및 블로그]
1. https://ko.reactjs.org/tutorial/tutorial.html#what-is-react
2. https://dev-yakuza.posstree.com/ko/react/create-react-app/react/
3. https://www.howdy-mj.me/dom/what-is-dom