리액트(React)란? 뜻과 개념부터 오해까지, 프레임워크가 아닌 이유

 

📌 React는 프레임워크가 아닙니다 — 라이브러리입니다

먼저 가장 많이 오해하는 부분부터 짚고 가겠습니다.
React는 프레임워크가 아닙니다.
정확히 말하면 **"UI(User Interface) 라이브러리"**입니다.

✔️ 프레임워크 vs 라이브러리

구분 프레임워크 (Framework) 라이브러리 (Library)

정의	전체 프로그램 구조와 흐름을 주도함	특정 기능만을 수행하는 모듈
특징	내가 프레임워크의 규칙을 따라야 함	내가 필요한 기능만 골라 씀
예시	Angular, Spring	React, Lodash

React는 웹사이트나 앱에서 **"화면을 구성하고 그리는 부분"**만 담당합니다.
라우팅(페이지 이동), 상태 관리, 서버와의 연결 같은 기능은 React가 제공하지 않습니다.
따라서 React를 사용할 때는 필요에 따라 React Router, Redux, Axios 같은 다른 라이브러리를 함께 조합해야 합니다.

👉 쉽게 말하면, React는 UI 조립 도구라고 보면 됩니다.

---

💡 React의 등장 배경과 필요성

React는 Facebook(현 메타)에서 내부적으로 개발되어 2013년에 오픈소스로 공개된 기술입니다.
당시 프론트엔드 개발은 jQuery 중심이었고, HTML과 JS를 섞어서 관리하다 보니 유지보수가 어려웠습니다.

복잡한 상태 변화
+
중복된 UI 코드
+
전체 페이지 새로고침 방식

📉 비효율적인 개발 구조

React는 이 문제를 해결하고자 컴포넌트 기반 개발과 가상 DOM(Virtual DOM) 개념을 도입했습니다.
한마디로, 화면의 일부만 똑똑하게 바꾸자는 접근입니다.

---

🔧 React의 핵심 개념 ① 컴포넌트(Component)

React의 가장 큰 특징은 컴포넌트 기반 개발입니다.
컴포넌트는 화면의 작은 조각을 의미하며, 이 조각들을 조립해서 전체 화면을 구성합니다.

예시를 들어볼게요.

function Welcome(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

<Welcome name="지민" />

위 코드는 Welcome이라는 컴포넌트를 만든 것입니다.
props.name에 따라 "안녕하세요, 지민님!", "안녕하세요, 수진님!" 등 유연하게 변할 수 있습니다.

이런 식으로 ‘장바구니 버튼’, ‘상품 카드’, ‘헤더’, ‘푸터’ 등 모든 UI 요소를 컴포넌트로 쪼개어 재사용성과 유지보수성을 높일 수 있습니다.

---

🔄 React의 핵심 개념 ② 상태(State)와 렌더링

화면은 고정된 정보만 보여주는 것이 아니라, **상태(state)**에 따라 동적으로 바뀌어야 할 때가 많습니다.
React는 상태가 바뀌면 자동으로 관련된 컴포넌트만 다시 그려줍니다. 이걸 **리렌더링(Re-rendering)**이라고 합니다.

function LikeButton() {
  const [liked, setLiked] = useState(false);
  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? "좋아요 취소" : "좋아요"}
    </button>
  );
}

위 예시에서 버튼을 클릭하면 liked 상태가 반전되며, 텍스트도 함께 바뀌는 것을 볼 수 있습니다.
이처럼 React는 UI와 상태를 연결해 직관적이고 효율적인 개발 방식을 제공합니다.

---

💬 실무에서의 React 대화 예시

React를 이해하면 실무 커뮤니케이션도 쉬워집니다.

👩‍💻 디자이너: “모바일 버전에서 헤더 위치 바꾸고 싶은데, 수정 오래 걸릴까요?”
👨‍💻 개발자: “헤더를 컴포넌트로 만들어놔서 조건만 바꾸면 바로 적용돼요.”

👩‍💻 기획자: “장바구니 숫자가 바로바로 바뀌게 해주세요.”
👨‍💻 개발자: “React 상태만 연결해두면 자동으로 바뀌게 만들 수 있어요.”

이처럼 React의 컴포넌트화와 상태 관리는 실무에서 큰 장점으로 작용합니다.

---

💼 왜 React를 이렇게 많이 쓸까?

React는 현재 전 세계적으로 가장 인기 있는 프론트엔드 기술입니다.
다양한 이유가 있지만, 대표적인 강점은 아래와 같습니다.

✅ 장점 정리

1. 컴포넌트 기반 아키텍처
   → 재사용성, 유지보수성, 협업 효율 증가
2. 빠른 렌더링 (가상 DOM)
   → 전체 페이지가 아니라 변경된 부분만 렌더링
3. 풍부한 생태계
   → Next.js, Redux, React Router, React Query 등 다양한 확장 도구 존재
4. 커뮤니티와 문서화
   → 전 세계 개발자 커뮤니티가 활발, 자료와 튜토리얼 풍부
5. 취업·실무에 강함
   → 대부분의 IT 회사에서 React 기반 프론트엔드를 요구

---

🔍 React vs Vue vs Angular

항목 React Vue.js Angular

타입	라이브러리	프레임워크	프레임워크
주도	Meta(구 Facebook)	Evan You	Google
러닝커브	중간	쉬움	어려움
문법 자유도	높음 (자유롭게 조합)	비교적 자유로움	엄격한 구조 필요
주요 특징	컴포넌트, 상태 기반	반응형 데이터 바인딩	구조화된 대규모 앱용

---

🧑‍💻 실전에서 React를 선택해야 할 때는?

React는 모든 프로젝트에 적합한 것은 아니지만, 아래와 같은 상황에서는 탁월한 선택이 됩니다.

• 화면에 반복 요소가 많고 재사용이 필요한 경우
• 사용자의 인터랙션이 많고 상태가 자주 변하는 경우
• 대규모 프로젝트에서 유지보수가 중요한 경우
• 빠르게 UI 프로토타입을 만들고 싶은 경우

긱다이브는 실제로 쇼핑몰, 포트폴리오 사이트, 스타트업 플랫폼, 커뮤니티 서비스 등
다양한 프로젝트에서 React를 활용해 성능과 유지보수 측면에서 매우 긍정적인 성과를 얻었습니다.

---

🧾 마무리 요약

정리하자면, React는...

• 화면을 동적으로 구성할 수 있게 도와주는 UI 라이브러리
• 프레임워크처럼 모든 걸 맡지 않고 필요한 부분만 조합해서 사용하는 도구
• 컴포넌트와 상태 관리를 통해 개발 생산성과 유지보수성을 높여주는 기술

초보자에게는 어렵게 느껴질 수 있지만, 구조와 철학을 이해하면 그 어떤 도구보다도 강력하고 유연한 무기가 되어줄 겁니다.