React – React 시작하기 – 개요 – 0 – React란 무엇인가 (UI 라이브러리 vs 프레임워크)

작성자 wooah
React – React 시작하기 – 개요 – 0 – React란 무엇인가 (UI 라이브러리 vs 프레임워크)

React란 무엇인가? (UI 라이브러리 vs 프레임워크)

안녕하세요! 😊 오늘은 웹 프론트엔드 개발의 꽃, React에 대해 아주 알기 쉽게 풀어서 설명드릴게요. 특히 “React는 UI 라이브러리인가? 프레임워크인가?” 라는 궁금증, 한 번쯤 들어보셨죠? 마치 고양이와 호랑이처럼 비슷해 보이지만 결정적인 차이가 있는 두 개념을 React를 중심으로 쏙쏙 정리해볼게요!

React란 무엇인가요?

React는 **페이스북(현 메타)**에서 개발하고 유지 관리하고 있는 UI 구축을 위한 JavaScript 라이브러리입니다. 웹사이트나 앱의 사용자 인터페이스, 즉 사용자와 상호작용하는 ‘겉모습’을 만들기 위해 사용돼요.

🧩 한마디로 말하면, React는 웹 화면의 블록을 조립하는 레고 조각이라고 생각하시면 이해가 쉬워요! 각 조각이 컴포넌트이고, 이걸 조립해서 하나의 완성된 화면을 만드는 거죠.

라이브러리와 프레임워크의 차이

이쯤에서 헷갈리는 부분이 나옵니다. React는 프레임워크인가요? 아니면 라이브러리인가요?

1. 라이브러리란?

  • 개발자가 필요한 기능을 선택해서 사용하는 도구 모음입니다.
  • 개발자가 흐름을 직접 제어합니다.
  • React는 이 쪽에 속해요.

2. 프레임워크란?

  • 개발 구조와 흐름을 프레임워크가 주도합니다.
  • 정해진 틀과 규칙이 있어요.
  • 대표적으로 Angular, Vue(Composition API 사용 시), Django 등이 있어요.

🎯 쉽게 말하면,
라이브러리는 내가 요리사고 레시피는 선택 가능,
프레임워크는 셰프가 있고 난 보조 역할이에요!

그럼 React는 왜 라이브러리인가요?

React는 단순히 **”UI를 그리는 도구”**만 제공합니다.
상태 관리, 라우팅, API 통신 같은 기능은 React의 본체엔 포함돼 있지 않아요.

하지만! 필요한 기능은 별도 라이브러리와 함께 붙이면 프레임워크 못지않은 구성을 만들 수 있어요.

React의 대표적인 주변 생태계

기능 라이브러리 예시
상태 관리 Redux, Zustand, Recoil
라우팅 React Router
폼 처리 React Hook Form
서버 상태 React Query, SWR
스타일링 styled-components, Emotion

🧱 React는 마치 “기초 공사만 잘된 집터” 같아요. 거기에 방을 나누고, 벽지를 붙이고, 가구를 들이면 멋진 집이 되는 거죠!

예시로 보는 React

import React from 'react';

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

위 코드는 단 하나의 컴포넌트입니다.
이렇게 조각조각을 만들어 재사용하면서 유지보수가 쉬운 구조를 만들 수 있어요.

프레임워크가 필요할 때는?

만약 여러분이 “로그인, 회원가입, 관리자 페이지, 서버사이드 렌더링, SEO 최적화까지 한꺼번에” 하려고 한다면,
Next.js나 Remix 같은 React 기반 프레임워크를 고려하는 게 좋습니다.

  • Next.js: 서버사이드 렌더링, 파일 기반 라우팅, 정적 사이트 생성 등 올인원 지원
  • Remix: 최신 웹 표준 중심으로 서버와 클라이언트의 협업 최적화

💡 프레임워크는 미리 짜여진 지도 위에서 건물을 올리는 느낌!
빠르게 앱을 구성하고 배포까지 쉽게 할 수 있어요.

React의 장점은 뭘까요?

  • 컴포넌트 기반 구조: 유지보수, 재사용성이 탁월해요
  • 가상 DOM(Virtual DOM): 빠른 렌더링 성능
  • 방대한 커뮤니티와 생태계: 해결 안 되는 문제가 거의 없어요
  • 다양한 확장성: 웹, 모바일(React Native), 데스크톱까지 확장 가능

React를 처음 쓴다면 주의할 점

주의할 점 설명
개념부터 잘 잡기 JSX, 컴포넌트, props, state, hook 같은 기초 개념을 튼튼히!
너무 많은 라이브러리 사용 X 처음엔 React만으로도 충분히 많은 걸 할 수 있어요
CRA(create-react-app) 남용 금지 실제 프로젝트에서는 Vite나 Next.js도 고려해 보세요
상태 관리 구조 미리 설계하기 App이 커질수록 상태 관리가 복잡해져요

마무리하며

React는 웹 UI 개발의 혁명이라 해도 과언이 아닐 정도로 널리 쓰이고 있는 기술이에요.
프레임워크가 아닌 라이브러리라는 본질을 이해하고 나면, React의 유연함과 확장성을 더욱 잘 활용하실 수 있답니다 😊

웹 개발 세계에 첫발을 내딛는 분들께 React는 아주 든든한 동반자가 되어줄 거예요.
꼭 레고를 조립하듯, 조각조각 만들어가는 재미를 느껴보세요!

📌 요약 정리 및 주의사항

  • React는 UI 구축에 초점을 둔 JavaScript 라이브러리입니다.
  • 상태 관리, 라우팅 등은 외부 라이브러리로 구성해야 합니다.
  • 프레임워크와 달리 개발자가 흐름을 주도합니다.
  • Next.js, Remix 등 React 기반 프레임워크도 있습니다.
  • 기초 개념, 특히 컴포넌트와 상태의 이해가 중요합니다.
  • 너무 많은 라이브러리로 시작하면 혼란스러울 수 있으니 점진적으로 확장하세요.

앞으로도 React의 세부적인 개념 하나하나 찬찬히 알아보는 시간 가져볼게요.
다음 글에선 SPA와 React의 역할에 대해 이야기해볼게요. 고맙습니다! 😄

답글 남기기