React가 뭐야?

jhj46456·2020년 8월 18일
0

20년 8월 18일을 기점으로 React를 배운지 1년이 지났다.

필자는 어떤 것을 배우든 100% 활용하기 위해서는 기본 동작 원리를 알아야 한다고 생각한다.

그래서 React를 배우고 사용하는 개발자들이 놓치기 쉬운 것들을 정리해보았다.

👍 물론 이 내용들을 몰라도 개발에 지장은 없다.

뭐에요?

React가 무엇일까요? 생각나는 것이 하나쯤은 있으시죠? 이 질문에 모범 답안은 없습니다.

React를 개발한 Facebook 측은 UI를 만들기 위한 JS 라이브러리라고 설명을 했는데요.

그렇다면 라이브러리가 무엇일까요? 라이브러리와 반대되는 프레임워크는 무엇일까요?

일단 라이브러리, 프레임워크 두 가지 모두 다른 개발자가 작성한 코드입니다.

그 코드를 우리가 개발하기 위해 가져다 씁니다.

📌 한줄 요약 : 삶의 질 향상을 위해 가져다 쓰는 코드 집합

라이브러리와 프레임워크를 구분하는 기준은 간단합니다.

개발자정해진 규칙을 따르는지만 보면 되거든요.

라이브러리를 설명하기 좋은 예제는 jQuery입니다.

# jQuery
$(".larry's_blog").~

# JS
document.querySelector(".larry's_blog").~

우선 jQuery는 HTML Element를 가져오기 위해 $("...") 구문을 사용합니다.

하지만 이는 document의 메소드로도 가져올 수가 있죠.

📌 라이브러리는 그 기능이 다른 방법으로 쉽게 대체됩니다.

그러면 프레임워크는 무엇일까요?

프레임워크는 개발자에게 규칙을 지키라고 잔소리를 합니다.

프레임워크를 설명하기 좋은 예제는 Express입니다.

import express from "express";
const PORT = 4000;
const app = express();
app.get("경로", 콜백함수);
app.listen("PORT", 콜백함수);

express로 서버를 구동하기 위해 당신은 https://expressjs.com/en/starter/hello-world.html에 들어가서 작성 규칙을 보게됩니다.

그리고 app.get은 다른 메소드로 대체가 불가능합니다.

📌 프레임워크는 그 기능이 다른 방법으로 구현 불가능하며 규칙을 지켜야 합니다.

왜 써요?

이건 많은 분들이 답변을 못하시는 질문입니다. 단순히 구직 목적이 많았습니다 (제 경험상)

왜 사용할까요? 먼저 여러분들이 생각해봅시다.

Virtual DOM이라서? 빨라서? 구조가 간단해서?

모두 정답입니다. 모범답안은 없어요.

필자는 JS로 유사 React를 구현해보면서 JS의 한계점을 느껴봤습니다.

RealDOM (JS)으로 React를 만들면 아래 깃허브 URL처럼 수많은 DOM을 사용해야 합니다.

https://github.com/Kunune/JSP/blob/master/1-2%20JSP%20Project/assets/js/util.js#L8

다시는 마주하고 싶지않은 경험이었습니다.

📌 한줄 요약 : JS 라이브러리를 안쓰면 삶의 질이 떨어집니다.

빠르다는 부분도 설명을 드리자면 Virtual DOM으로 구현이 되기 때문에

메모리에 UI 컴포넌트를 넣어놓고 필요할 때 꺼내쓰는 방식입니다.

필자는 몇년 전에 램디스크에 R/W 벤치마크를 돌려보았는데, R/W 모두 5,000MB/s 이상이 나왔던 것으로 기억을 해요.
📭 https://gist.github.com/hmemcpy/c7ea24fb9780c4e1810d

그렇게 빠른 I/O를 가진 저장장치에 UI를 저장하고 꺼내오니 엄청 빠른 것이지요.

또한 메모리에 저장을 하다보니 모양은 같은데 각기 다른 데이터를 넣어줘야 하는 그런 작업에도 매우 유용합니다.


출처 : naver의 오늘 읽을만한 글 캡쳐 이미지

컴포넌트는 딱 한번 메모리에 할당한 뒤 각기 다른 데이터를 props로 여러번 쏴줍니다.

RealDOM으로 작업할 때는 매번 컴포넌트를 만들어서 데이터 집어넣고 출력하지요.

📌 한줄 요약 : React는 빠른 친구에요.

...

React에 대해서 알아두면 쓸데없는 것이 추가로 궁금하실 경우 댓글 다시면 내용 추가해드립니다.

0개의 댓글