이롭게 현명하게
[React] 리액트란 본문
목차
리액트란
장단점
[리액트란?]
자바스크립트를 사용해서 HTML로 구성한 UI에 DOM을 변형시키거나 기능을 추가해 보았다면 어떻게 코딩했는지 알 것이다.
* DOM : HTML 각 Element에 대한 정보를 지닌 자바스크립트 객체
DOM을 변형하려면 브라우저의 DOMSelector API( getElementById ,querySelector 등 )를 사용하여 특정 DOM을 선택한 뒤에 특정 이벤트가 발생하면 변화를 주는 작업을 해야 한다.
HTML에서 태그를 사용하여 id를 부여하고 자바스크립트(.js)에서 getElementById를 사용해 DOM을 선택하는 DOMSelector API 사용한다.
리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 및 프레임워크이다.
리액트는 특히 싱글 페이지 애플리케이션 및 모바일 애플리케이션 개발에 널리 사용된다.
사용자 인터페이스 (User Interface : UI) : 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간의 입력과 출력을 제어해주는 것 (ex. 버튼, text 입력 창 )
라이브러리 : 자주 사용되는 기능들을 정리해 모아 놓은 것으로 특정 프로그래밍 언어에서 자주 사용되는 기능들을 모아서 정리해둔 모음집을 말한다.
UI 라이브러리 : 사용자 인터페이스를 만들기 위한 기능 모음집, 화면을 만들기 위한 기능들을 모아둔 것
리액트는 대표적인 자바스크립트 UI 라이브러리라고도 할 수 있다.
자바스크립트로 구현해야할 웹 기능을 편리한 도구와 특화된 구조 안에서 만들 수 있다.
리액트는 웹 애플리케이션 구축을 목적으로 만든 라이브러리기 때문에 웹 애플리케이션 제작에 있어 순수하게 자바스크립트 만으로 개발하는 것 보다는 유리하다.
HTML 태그의 id 값을 통해 태그를 선택하는 작업을 해준다.
.onclick 이벤트를 통해 이벤트가 발생하면 변화를 주었다.
만약 사용자와 상호작용이 자주 발생하고 동적으로 UI를 표현한다면 코드의 규칙이 다양해질 것이고 코드가 복잡해져 관리가 힘들어질 것이다.
웹 애플리케이션의 규모가 커지게 된다면 DOM을 직접적으로 접근하여 개발하기 때문에 코드가 난잡해지기 쉽다.
DOM과 처리해야 할 이벤트가 다양해지면 관리해야 할 것들도 다양해진다.
이러한 문제를 해결하기 위해 ember,backbone,angular.js 같은 프레임워크들이 생겨났다.
이 프레임워크들은 작동 방식이 각각 다르지만, 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성도 바뀌도록 하여 업데이트해 주는 작업을 간소화해 주어 웹 개발의 어려움을 해결해 주었다.
리액트는 어떠한 상태가 바뀌었을 때 바뀐 상태에 따라 DOM을 어떻게 업데이트할지 규칙을 정하는 것이 아니라 처음부터 모든 것을 새로 만들어서 보여준다.
그렇게 하면 업데이트를 어떻게 해야 할 것인지에 대해 고민을 하지 않아도 돼 개발이 쉬워진다.
동적인 UI를 보여주기 위해 있던 것들을 날려버리고 새로 만들게 된다면 속도가 아주 느려질 것이다.
작은 웹 애플리케이션이라면 상관 없겠지만, 규모가 큰 웹 애플리케이션이라면 상상도 할 수 없다.
하지만 리액트에서는 virtual DOM 이라는 것을 사용하여 성능을 지켜가며 사용한다.
- virtual DOM : 가상의 DOM으로 실제 DOM이 아니다. 웹 페이지와 실제 DOM 사이에서 중간 매체 역할을 한다.
- virtual DOM을 사용하는 이유 : 빠른 업데이트 때문
브라우저에서 실제로 보여지는 DOM이 아닌 메모리에 가상으로 존재하는 DOM으로써 자바스크립트 객체이기 때문에 작동 성능이 실제 브라우저에서 DOM을 보여주는 것보다 속도가 훨씬 빠르다.
리액트에서는 상태가 업데이트 되면 업데이트가 필요한 UI를 메모리에 있는 virtual DOM에 렌더링을 한다.
사용자와 상호작용을 하는 웹 페이지의 경우 화면에 어데이트가 자주 일어난다.
화면이 업데이트 된다는 것은 DOM이 바뀐다는 것이다.
이것은 성능에 영향을 미치고 비용이 많이 든다.
수정할 부분을 DOM에 대해서 모두 찾아야하기 때문이다.
리액트에서는 DOM을 직접 수정하는 것이 아니라 업데이트 해야할 최소한의 부분만을 찾아서 업데이트한다.
어떤 상태의 변경(state change)가 일어나면 virtual DOM에서는 업데이트 해야할 최소한의 부분을 검색(compute diff)한다.
검색된 부분만을 업데이트하고 렌더링 하면서 변경된 내용을 빠르게 사용자에게 보여준다.
이를 통해 리액트에서는 필요한 변화만 발전시켜 어떻게 업데이트해야 할지에 대한 고민을 하지 않게 되었고 빠른 성능을 지킬 수 있게 되었다.
리액트를 사용해서 웹앱을 개발하게 될 때 UI를 어떻게 업데이트할지에 대한 고민을 하지 않고 그 대신 UI가 어떻게 보여야 하는지에 대해 집중하여 프로젝트를 개발하게 된다.
[장단점]
리액트에서는 ui를 컴포넌트라는 것을 사용하여 선언하게된다.
컴포넌트는 UI 조각이라고 생각하면 이해하기 쉽다.
<장점>
- 컴포넌트 단위 개발 : 생산성 향상, 유지보수 용이
- 싱글 페이지 어플리케이션 : 사용자 경험 개선
- 높은 인지도 : 인기 있는 기술을 할수록 구직에 유리
- 빠른 업데이트와 렌더링 속도
- 업데이트 : 웹 사이트를 탐색할 때 화면에 나타나는 내용이바뀌는 것
- 재사용성(Reusability) : 다시 사용이 가능한 성질
- 재사용성이 높아지면 개발 기간이 단축,유지보수가 용이해진다.
<단점>
- 어려움 : 새 문법 학습 필수 & 탄탄한 자바스크립트 스킬 요구
- 호환성 문제 : 구현 브라우저 미지원
- 속도와 비용 : 리액트로 만든 웹은 용량이 크다.
https://devyihyun.tistory.com/168
[React] 리액트 시작하기 / 리액트 설치 / 개발환경
목차 작업환경 준비하기 Node.js 설치하기 yarn 설치하기 vscode 설치하기 git for windows 설치하기 리트 환경설정 [작업 환경 준비하기] 리액트 개발을 시작할 수 있도록 작업 환경을 준비해야 한다. 설
devyihyun.tistory.com
잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊
댓글과 좋아요는 큰 힘이 됩니다!
[ 참고자료 ]
https://www.youtube.com/watch?v=KOcffQzjGMU
<a href="https://www.flaticon.com/kr/free-icons/-" title="웹 페이지 아이콘">웹 페이지 아이콘 제작자: Talha Dogar - Flaticon</a>
<a href="https://www.flaticon.com/kr/free-icons/-" title="상호 작용 아이콘">상호 작용 아이콘 제작자: Vectors Market - Flaticon</a>
'웹 개발 > React' 카테고리의 다른 글
| [React] 리액트 조건부 렌더링 (1) | 2023.12.21 |
|---|---|
| [React] 리액트 props / props란? (0) | 2023.12.20 |
| [React] 리액트 JSX (0) | 2023.12.19 |
| [React] 리액트 컴포넌트(Component) 란? / component의 개념 (0) | 2023.12.18 |
| [React] 리액트 시작하기 / 리액트 설치 / 개발환경 (1) | 2023.12.15 |
