📌 React를 사용하는 이유
웹을 만들기 위해선 HTML, CSS, JS를 이용해야 한다. 보통 아래와 같이 페이지 별로 코드를 짜게 된다.
<!--A페이지 (A.html) -->
<html>
<head>
<script ...>
<link ...>
</head>
<body>
<div>...</div>
...
</body>
</html>그러나 점점 웹이 복잡해 지면서 더 많은 html, Javascript가 들어가게 된다. 점점 하나의 html 파일에 수많은 Javascript 라이브러리, HTML 요소들을 포함하게 된다.
하나의 파일에 코드 수가 점점 많아지면 개발자의 입장에서는 유지보수하기가 어려워진다. 어느 코드에 문제가 생겼는지 확인하기 위해 수천 줄의 코드를 확인해야 할 수도 있고, 코드끼리 의존성이 깊을수록 복잡해질 거다.
<!--A페이지 (A.html) -->
<html>
<head>
<script ...>
<script ...>
<script ...>
<script ...>
<script ...>
<script ...>
<link ...>
<style>
...
</style>
...
</head>
<body>
<h3>개발 다마고치 짱</h3>
<div>...</div>
<div>...</div>
<div>...</div>
<script>
...
</script>
...
</body>
</html>또한 수많은 javascript 라이브러리를 불러와서 사용하다 보면 라이브러리 객체들끼리 이름이 같아 충돌할 수도 있고 관리하기도 어려워진다.
<!--analytics 객체(변수)를 사용할 수 있는 서로 다른 스크립트 2개를 불러온다-->
<script src='https://www.google-analytics.com/analytics.js'></script>
<script src='https://www.grab-analytics.com/analytics.js'></script>
<script>
//analytics 객체가 어디 스크립트(google인지 grab인지)인지를 알 수 없다(충돌)
analytics.send();
</script>React를 사용하면 깔끔하게 이런 문제들을 해결할 수 있다. React는 페이스북에서 만든 라이브러리로 웹 개발을 편하게 개발할 수 있도록 도와준다.
front-end developer 🐣