1. Background
프론트엔드 개발자를 지향한다면 한번쯤 들어본 단어가 있는데 바로 React다. 대부분의 사람들이 React라는 것을 사용해서 개발한다는데… 그래서 React가 뭔데? 이거 왜 쓰는 건데? 라고 생각이 든다면 이 글을 읽어보는 것을 추천한다.
2. What
리액트는 Facebook(현 Meta)에서 2013년에 출시한 사용자 인터페이스 (UI)를 만들기 위한 라이브러리로 쉽게 말해서 웹사이트나 웹 애플리케이션의 화면을 만들고 관리하는 도구
현재 2024년 기준 React는 전 세계 웹사이트의 40%이상 사용되고 있으며
해외에서는 Netflix, Airbnb, Instagram과 같은 대형 사이트
국내에서는 소위 ‘네카라쿠배당토’ 라고 불리는 대기업에서 React를 사용 중
(네이버, 카카오, 라인, 쿠팡, 배달의 민족, 당근마켓, 토스)
출처: https://survey.stackoverflow.co/2024/technology#most-popular-technologies-webframe-prof
💡사용자 인터페이스(User Interface)
사용자와 컴퓨터 시스템 간의 상호작용이 이루어지는 접점
→ 화면에 보여지는 모든 것💡라이브러리(Library)
프로그래밍에서 사용되는 기능들을 모아둔 코드의 모음집.
사용자가 직접 기능 구현 코드들을 작성하지 않아도 기존에 만들어진 코드를 갖다 씀으로서
코드의 안정성을 확보하고 시간을 절약할 수 있다.
ex.밀키트
- 재료가 미리 손질 되어 있음 → 미리 작성된 코드
- 요리 시간 단축 → 개발 시간 단축
- 레시피가 검증되어 있음 → 검증된 코드 사용
- 실패 확률이 낮음 → 안정성 확보
- 필요한 만큼만 사용 → 필요한 기능만 가져다 사용3. Why?
1. 효율적인 DOM관리 (Virtual DOM)
- 실제 DOM: 변경사항이 있을 때마다 전체 페이지를 다시 그려야 함(리플로우, 리페인트)
- Virtual DOM: JS리소스들을 우선적으로 메모리로 받아와 가상 DOM을 통해 실제 변경이 필요한 부분만 업데이트(Diffing Algorithm)
// JavaScript
document.querySelector("input").textContent = "새로운 내용";
// React
setState({ content: "새로운 내용" });2. 직관적인 코드 작성
// JavaScript
const element = document.createElement("div");
element.className = "greeting";
element.textContent = `안녕하세요, ${user}님`;
// React
<div className="greeting">
안녕하세요, {user}님
</div>JavaScript
- 요소를 변수에 할당
- 클래스를 따로 선언해주고
- 요소에 내용 작성
React
- 기존 HTML문서 작성하듯이 (JSX)
💡JSX (JavaScript XML)
- HTML을 React에서 쓸 수 있게 해주는 문법
- JavaScript 코드 안에서 HTML과 유사한 마크업을 작성할 수 있음
- 중괄호 {}를 사용해 JavaScript 표현식을 직접 삽입 가능3. 컴포넌트 기반 개발
- 재사용 가능한 독립적인 코드 조각
- 유지보수 용이
- 개발 생산성 향상
리액트의 가장 큰 특징중 하나는 컴포넌트 기반 개발이라는 것으로 각각의 기능을 가진 블록들의 모음이라는 것이다.
레고처럼 다양한 블록으로 화면을 구성하며 각각이 독립적인 코드블록이기 때문에 문제 확인과 보수가 쉽다.
4. 단방향 데이터 흐름 (부모 → 자식)
- 예측 가능한 데이터 관리
- 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달되기 때문에 부모로부터 받은 props 수정 불가
- 데이터 변경은 부모로부터 전달받은 함수를 통해서만 가능
- 디버깅 용이성
- 상태 변경이 일어나는 위치가 명확하기 때문에 버그 발생 시 데이터 흐름을 따라가며 원인 파악이 용이
- 애플리케이션 안정성 향상
- props는 읽기 전용으로 예상치 못한 상태 변경을 방지하며 컴포넌트 간 의존성이 명확함
⇒ 단방향 데이터 흐름은 React 애플리케이션의 예측 가능성과 유지보수성을 향상시켜 대규모 애플리케이션에서도 안정적인 상태 관리를 가능케 함.
5. 풍부한 생태계와 커뮤니티
- 다양한 패키지 매니저를 통한 다양한 라이브러리 제공 (ex. npm, yarn)
- Stack Overflow, GitHub등 활발한 커뮤니티 → 정보 습득에 용이
4. So
- React는 Facebook에서 만든 UI라이브러리로 프론트엔드 생태계에서 40%를 차지하고 있다.
- Virtual DOM으로 웹페이지 성능을 최적화함
- JSX로 코드를 직관적으로 작성
- 컴포넌트 기반으로 블록의 가감이 쉬움
- 단방향 데이터로 데이터 관리가 쉬움
- 거대한 생태계로 다양한 레퍼런스를 쉽게 접할 수 있음
Vue나 Angular와 같은 프레임워크도 많이 쓰이지만 React라는 거대한 생태계가 처음 접하는 사람들에게는 좀 더 쉽게 접할 수 있다.
