React(리액트)란? 리액트의 탄생배경과 목적 && 데이터 흐름

안녕하세요~ Node.js가 끝나고, 이제는 리액트에 진입했습니다. 최근들어 포스팅이 없던 이유는 팀프로젝트 기간으로 2주동안 프로젝트에만 포커싱을 잡았기 때문입니다. 조만간 결과물에 대한 내용을 포스팅 해드릴테니 기다려주시면 감사하겠습니다!!

📑목차
1. 리액트(React)
1-1. 리액트란?
1-2. 리액트의 탄생배경
1-3. 리액트의 목적
1-4. 리액트의 데이터 흐름
1-5. 리액트의 장단점
1-6. 가상돔(Virtual DOM)

📜서론

리액트에 대해 혹시 접해보신적 있을까요? 웹 개발 분야에서는 현재 정점을 찍고 있고, 많이 쓰이고 있는 기술스택입니다. 그럼 리액트가 무엇인지, 어떻게 탄생했는지 알아봐야겠습니다. 그럼 본론으로 넘어가시죠~

📜본론

1. 리액트(React)

1-1. 리액트(React)란?

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리를 말한다

 

공식문서 참조해주세요
https://ko.legacy.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

1-2. 리액트의 탄생 배경

초기에는 HTML, CSS, javascript를 파일로 관리하는데, 정적인 웹 페이지가 대부분인 시절, 이때 방식은 단순하였지만 동적인 상호작용을 보여주는데에는 부족했다. 이후 jQuery의 등장으로 DOM을 제어하고, 동적인 UI를 구성할 수 있었다. 하지만 jQuery ㄹ로 코드가 길어지면 구조적인 한계를 겪게되고, 상태관리나, 성능 최적화에 어려움이 있었다. 그 이후 backbone, angular.js 등 SPA 프레임워크가 급부상 하면서  라우팅, 모델-뷰 연결, 템플릿 관리를 지원하였지만 이들 역시 DOM을 직접 제어하거나, 데이터 흐름이 복잡하여 유지보수나 디버깅에 어려움을 겪게됨, 이러한 문제점들을 해결하여 나타난 것이 FaceBook의 개발자인 jordan Walke가 2011년 페이스북 내부에서 개발하여 2013년에 오픈소스로 공개된 라이브러리가 'React' 라고 볼 수 있다.

 

1-3. 리액트의 목적

 

1️⃣ 개발자가 직접 모든 DOM의 제어의 코드를 작성하는 것이 아닌 핵심 DOM제어의 기능을 react-router-dom등 이런 라이브러리로 제어를 편하게 할 수 있도록 제공

2️⃣  UI를 개발할 때 컴포넌트(Component) 단위로 작성해서 재사용의 단위를 표현한다.

3️⃣  단방향 데이터의 흐름이 존재한다

 

1-4. 리액트의 데이터 흐름

 

리액트는 단방향 데이터 흐름을 가진다. 이는 데이터를 부모 컴포넌트에서 자식 컴포넌트로만 전달할 수 있다는 의미다. 부모 컴포넌트는 자식 컴포넌트에게 props를 통해 데이터를 전달하고, 자식은 전달받은 데이터를 읽기만 할 수 있으며 직접 수정할 수는 없다. 만약 자식 컴포넌트에서 어떤 값을 변경해야 할 경우에는, 그 상태를 부모 컴포넌트로 끌어올려서 관리해야 한다. 자식은 부모로부터 받은 콜백 함수를 호출함으로써 간접적으로 상태를 변경할 수 있다.

 

 

1-5. 리액트의 장단점

 

장점 

1️⃣ 빠른 업데이트와, 렌더링 속도

2️⃣ 재사용성이 높은 컴포넌트 기반 구조

3️⃣ 메타의 든든한 지원

 

단점

1️⃣  방대한 학습량

2️⃣  높은 상태 관리 복잡도

 

 

 1-6. 가상돔(Virtual DOM)

실제 화면에 그리는 DOM이 아닌 메모리 상에서만 존재하는 가짜 DOM을 말한다

 

리액트에서 가상돔은 렌더링 이전에 DOM과 렌더링 이후에 DOM을 가지고 있습니다. 만약 상태 변경이나, Props가 바뀌면 새로운 가상 DOM을 생성하고 이전에 가상돔과 비교하여 필요한 부분만 비교(diffing) 하여 실제 DOM에 반영하여 리렌더링 하는 과정을 거칩니다. 

📜결론

이렇게 오늘은 리액트의 기본 개념, 특히 가상 DOM의 동작 원리와 장점, 그리고 데이터가 어떻게 흐르는지(단방향 데이터 흐름)에 대해 간략히 알아보았습니다. 리액트는 복잡한 UI를 효율적으로 관리할 수 있게 도와주는 라이브러리로, 가상 DOM을 통해 렌더링 성능을 최적화하고, 예측 가능한 데이터 흐름을 통해 유지보수와 확장이 쉬운 구조를 제공한다는 것을 알게 되었고 앞으로 있을 내용이 흥미진진하네요!! 그럼 마무리 하겠습니다. 감사합니다!!