리액트란, 작동 원리, 개발 환경 구축 - React

React JS

React - 리액트란, 작동 원리, 개발 환경 구축

---

리액트란

UI 자바스크립트 라이브러리로 싱글 페이지 애플리케이션이나 모바일 애플리케이션 제작하기 위해 만들어졌고 페이스북(메타)에서 개발하였다.

 

리액트는 왜 만들어졌을까?

자바스크립트를 통해 HTML의 DOM을 변화시키기 위해 번거로운 작업이 필요했다.

개인적으로 만들었던 수량 증감 버튼을 활용하여 설명하자면

 

const minusBtn = document.getElementById('quantity-minus');
const plusBtn = document.getElementById('quantity-plus');
const quantity = document.getElementById('quantity-value');

//수량 플러스, 마이너스 버튼
minusBtn.addEventListener('click', () => {
    if (quantity.value == 1) {
        alert("최소 주문 수량은 1개입니다.");
    }
    else {
        quantity.value --
    }
})

plusBtn.addEventListener('click', () => {
    if (quantity.value >= 10) {
        alert("개인 최대 구매수량은 10개입니다.");
        quantity.value = 10
    }
    else {
        quantity.value ++
    }
})

 

위와 같은 방식으로 이벤트 핸들러를 통해 이벤트들을 다뤄야 했다. 이러한 버튼이 여러 개 있다면 코드가 난잡해지기 쉽고 서로 유기적으로 작동해 규칙을 설정하는 것도 쉬운 일이 아니었다. 자바스크립트 숙련자라면 코드를 깔끔하고 간결하게 작성할 수 있지만 필자는 아니었다.

하지만 React에서는 어떠한 상태가 바뀌었을 때, 그 상태에 따라 DOM을 어떻게 업데이트할지 규칙을 정하는 것이 아니라, 아예 다 날려버리고 처음부터 모든 걸 새로 만들어서 보여준다면 어떨까?라는 아이디어에서 개발이 시작되었다고 한다.

처음부터 다시 보여주면 너무 느린 거 아닐까? 하는 생각이 든다면 맞습니다. 하지만 React에서는 Virtual DOM이라는 것을 사용해 이를 해결했습니다.

 

Virtual DOM

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.

정리하자면

• 메모리 게 가상 DOM을 만든다.
• 업데이트가 필요한 부분만 가상 DOM으로 수정한다.
• 그 이후 REACT의 알고리즘을 통해 다른 부분을 감지하여 실제 DOM에 패치시켜준다.

이를 통해 리액트는 빠른 성능을 유지할 수 있게 되었습니다.

아래 링크를 참고하였고 Shadow DOM과 Virtual DOM의 차이점까지 정리되어있습니다.

https://ko.reactjs.org/docs/faq-internals.html

 

리액트의 단점

그렇다면 좋을 것만 같은 리액트의 단점은 무엇이 있을까, 우선 리액트는 싱글 페이지 애플리케이션을 위해 개발되었기 때문에 라우팅이나 API통신을 위해 추가 라이브러리를 사용해야 한다. 그리고 어떠한 면에서는 바닐라 JS를 사용하는 것이 더 깔끔해 보일 때도 있다. 이러한 단점들에도 불구하고 가장 많이 사용되는 라이브러리로 큰 커뮤니티를 형성하고 활용 가능한 오픈소스들이 많아 충분히 상쇄할 수 있다고 생각한다.

 

작업 환경 구축

리액트를 사용하기 위해서는 패키지 매니저 (Node.js, yarn)가 필요합니다. 필자는 Node.js를 선택하여 npm을 활용하여 구축하는 것을 정리하였습니다. 어느 것을 선택하는지는 자유입니다.

CLI를 이용하여 프로젝트를 생성하고자 하는 위치에서 아래 명령어를 입력합니다.

 

$ npx create-react-app (프로젝트 이름)

 

이후 cd로 프로젝트로 이동한 뒤 code.이나 직접 코드 에디터로 폴더를 열어줍니다.

여러 파일들이 다운로드되어 있을 것입니다. 작동하는지 확인하기 위해 아래 명령어를 입력합니다.

 

$ npm start

 

약간의 로딩 뒤 아래 페이지가 뜬다면 구축 완료입니다!.

Reference

https://react.vlpt.us/

벨로퍼트와 함께하는 모던 리액트 · GitBook