[ What is React ]
안녕하세요. Kim.YJ 입니다.
이번 포스팅은 React 에 대해 포스팅 해 보겠습니다.
React 에 대해 함께 알아보고, 한 단계씩 배워 봅시다.
[ React 란? ]
이번 포스팅을 통해 React란 무엇인지 간단하게 알아보는 시간을 가지겠습니다.
React는 UI를 구축하기 위한 선언적이고 효율적인 유연한 JavaScript Library 입니다.
사용자의 요구가 많아지면서 웹의 복잡성과 발전으로 개발자들이 처리해야 할 UI 가 많아지게 됩니다. 이런 상황에서 프론트엔드 개발자들은 기술의 한계를 극복하고자 새로운 기술인 Front-end Framework & Library를 개발하게 됩니다.
프론트 엔드 기술의 변화는 다음과 같습니다.
[ 1세대 프론트엔드 기술 ]
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="Name"></div>
</body>
</html>
- CSS
.Name {
width: 100px;
height: 100px;
}
- JavaScript
document.write("hello world");
기본적인 HTML, CSS, JavaScript 로 DOM을 조작하고 이벤트를 구현하였습니다.
[ 2세대 프론트엔드 기술 ]
<!-- JavaScript -->
const Name = document.getElementByID('Name');
<!-- jQuery -->
const Name = $('Name');
WEB 의 발전으로 DOM의 조작이 빈번하게 발생함에 따라 JavaScript 라이브러리 등 여러 기술이 등장하게 됩니다. jQuery 의 등장이 그의 시작입니다. 그러나 jQuery는 DOM의 조작행위에 범주에서 벗어나지 못해 한계에 직면하게 됩니다.
[ 3세대 프론트엔드 기술 ]
jQuery 의 등장 이후, 한계의 직면에 새로운 프레임워크 기술이 등장하게 되었습니다.
| 프레임워크 | 라이브러리 |
|---|---|
| Vue | React |
| Angular |
Framework 와 Library 의 차이
다른 사람이 만들어 둔 코드 라는 점의 공통점이 있지만 확연한 차이점이 있습니다.
-
- Framework
- 다른 사람이 만든 Frame 안에서 코드를 작업해야 하는 방식
-
- Library
- 내 코드에 다른 사람의 코드를 불러와 쓰는 방식
React 의 장점
React는 자기만의 문법을 가진 Framework(Angilar, Vue)와 다르게 자바스크립트 문법 그대로를 이용하였습니다. 나의 코드에 그대로 불러와 JavaScrip 문법 그대로 이용하며, 컴포넌트를 비교적 더 단순하고 간단하게 정의할 수 있는 장점이 있습니다.
지금까지 React에 대해 포스팅을 통해 알아 보았습니다.
다음 포스팅은 React에 대한 더 유익한 정보로 찾아뵙겠습니다.
감사합니다!