0. 개요와 역사

Tech Note — React 0. 개요와 역사

Tech Note React 0화 · 마지막 업데이트: 2025-12

목차

1. React는 무엇인가 (그리고 무엇이 아닌가)
2. React가 풀려던 문제: “UI = f(state)”
3. 핵심 개념 4가지: 컴포넌트/선언형/리컨실리에이션/JSX
4. 짧은 역사: 공개/확산/생태계
5. 라이선스 한 줄 정리(MIT) + 왜 중요했나
6. React를 인프라/보안 운영자가 써도 되는 이유
7. References

0) React는 무엇인가 (그리고 무엇이 아닌가)

React는 웹/네이티브 UI를 만들기 위한 JavaScript 라이브러리다. “라우팅/빌드/상태관리/데이터 패칭/인증”까지 한 번에 제공하는 올인원 프레임워크가 아니라, UI를 컴포넌트 단위로 만들고 상태 변화에 따라 화면을 안정적으로 갱신하는 데 집중한다.

✅ 공식 블로그에서도 “React는 MVC 프레임워크가 아니라 UI 라이브러리”라는 점을 분명히 한다. (왜 만들었는지/어떤 철학인지가 가장 잘 정리되어 있음)

1) React가 풀려던 문제: “UI = f(state)”

UI가 복잡해질수록 “어디서 DOM을 바꿨는지”, “어떤 상태가 현재 화면을 만들었는지” 추적이 어렵다. React는 이 문제를 선언형(Declarative) 접근으로 단순화한다.

• 상태(state)가 바뀌면 → UI를 “다시 그린다” (정확히는 필요한 부분만 효율적으로 갱신)
• 개발자는 “지금 상태라면 화면이 이렇게 보여야 한다”만 표현
• DOM 조작의 책임을 앱 코드에서 프레임워크(React) 쪽으로 이동

2) 핵심 개념 4가지

2-1) 컴포넌트(Component)

UI를 재사용 가능한 블록으로 쪼개고 조합한다. 결과적으로 “화면”이 아니라 “트리”로 사고하게 된다.

2-2) 선언형(Declarative)

“어떻게(DOM을 이렇게 저렇게 바꾼다)”가 아니라 “무엇(이 상태면 이렇게 보여야 한다)”에 집중한다.

2-3) 리컨실리에이션(Reconciliation)

상태가 바뀌었을 때, React는 변경 전/후 UI 모델을 비교하고 최소한의 변경만 DOM에 반영한다. 이 과정 덕분에 “전체를 다시 그리는 것 같은 코딩”을 하면서도 성능을 크게 망치지 않도록 돕는다.

2-4) JSX

JSX는 HTML처럼 보이지만 JavaScript 표현식이다. “UI를 코드로 선언”하는 데 최적화된 문법(확장)이라 이해하면 된다.

3) 짧은 역사: 공개/확산/생태계

시점	키워드	의미
2013	공식 블로그/공개 확산	“왜 React를 만들었는가”가 공개되며 철학과 방향이 정리됨
2016~	생태계 표준화	라우터, 빌드툴, 상태관리 등 “선택 가능한 조합”이 안정적으로 자리잡음
현재	React 단독 + 프레임워크 공존	React 자체로 SPA를 만들거나, Next.js 같은 프레임워크와 결합하는 선택지가 공존

4) 라이선스 한 줄 정리(MIT) + 왜 중요했나

현재 React는 MIT License로 제공된다. (오픈소스 생태계에서 가장 널리 쓰이는 관대한 라이선스 중 하나)

2017년에 React(및 일부 프로젝트) 라이선스를 MIT로 재라이선스하겠다고 공식 발표했고, 이 결정은 “기업/커뮤니티 채택”에 큰 영향을 줬다.

5) React를 인프라/보안 운영자가 써도 되는 이유

• 복잡한 운영 UI를 “컴포넌트 + 상태”로 분해하면 유지보수가 쉬워진다
• 권한별 UI(RBAC), 데이터 테이블/캘린더/차트 같은 구성 요소가 잘 맞는다
• 백엔드(Node/Python/Go/…​)와 분리되어 있어, 기존 운영 자동화 자산을 그대로 살릴 수 있다

단, React(프론트)는 “보여주는 역할”이다. 권한/검증/차단은 반드시 서버에서 강제해야 한다. (UI 숨김은 보안이 아니다)

References

• React Blog(legacy): Why did we build React?
• React GitHub · LICENSE(MIT)
• Meta Engineering: Relicensing React… under MIT
• react.dev (공식 문서)
• OWASP Cheat Sheet: Authorization

다음 글: Tech Note — React 1. 설치 방법 & 폴더 구성(Vite 기준)