11월 11, 2025

React - 리액트가 대체 뭐길래 다들 쓰는 걸까? React 완전 해부

리액트 구조 완벽 이해하기: React, 개념, 그리고 Hooks,Router의 관계

리액트를 처음 공부하다 보면 “React”, “Hooks”, “Router” 같은 용어들이 한꺼번에 등장해서 헷갈리기 쉽습니다.
이번 글에서는 이 개념들이 어떻게 연결되어 있는지, 각각 어떤 역할을 하는지를 단계별로 정리해보겠습니다.

🏗️ 1. React란 무엇인가?

React(리액트) 는 사용자 인터페이스(UI) 를 구축하기 위한 JavaScript 라이브러리입니다.
즉, 웹 애플리케이션의 “화면”을 효율적으로 관리하고 렌더링하도록 도와주는 도구입니다.

✅ React의 주요 특징

컴포넌트 기반 구조: UI를 재사용 가능한 조각(Component) 단위로 나누어 개발
가상 DOM(Virtual DOM): 변경된 부분만 효율적으로 업데이트
JSX: JavaScript 안에서 HTML 문법을 직관적으로 작성할 수 있는 문법
Props & State: 데이터 전달(Props)과 상태 관리(State) 지원

React는 이러한 개념들을 기반으로 전체 애플리케이션 UI를 구성하고 동작하게 합니다.

🧩 2. React의 핵심 개념 (Core Concepts)

리액트를 제대로 이해하기 위해 알아야 하는 근본적인 아이디어들은 다음과 같습니다.

개념	설명
컴포넌트 (Component)	UI를 독립적인 조각 단위로 나눈 것
JSX	JavaScript 코드 안에서 HTML 문법을 작성할 수 있게 해주는 확장 문법
가상 DOM (Virtual DOM)	변경 사항을 최소화하여 효율적으로 렌더링
Props (프롭스)	부모 → 자식 컴포넌트로 데이터 전달
State (상태)	컴포넌트 내부에서 변경 가능한 데이터 관리

💡 중요:
‘State(상태)’는 개념적인 부분이고, 이것을 실제 코드에서 관리하기 위한 구체적인 도구가 바로 React Hooks입니다.

⚙️ 3. React Hooks란?

React Hooks(리액트 훅스) 는 React 16.8 버전에서 도입된 새로운 기능(API) 모음입니다.

🎯 목적

기존에는 “클래스형 컴포넌트”에서만 사용할 수 있던 상태 관리(state) 나 생명주기(lifecycle) 기능을
“함수형 컴포넌트”에서도 쉽게 사용할 수 있도록 만든 특별한 함수들입니다.

🔧 주요 Hooks 예시

Hook	역할
useState	상태(State) 관리
useEffect	생명주기(Lifecycle) 또는 부수 효과(Side Effects) 관리
useContext	전역 상태 공유
useReducer	복잡한 상태 로직 관리

👉 Hooks는 React 라이브러리 내부에 포함된 기능(API) 이며,
“React의 일부”이지 별도의 라이브러리가 아닙니다.

🧱 React의 계층 구조 한눈에 보기

● React (리액트 라이브러리 전체)
  ├── 핵심 개념 (Concepts)
  │     ├── 컴포넌트 (Component)
  │     ├── JSX
  │     ├── 가상 DOM (Virtual DOM)
  │     ├── Props (프롭스)
  │     └── State (상태)
  │           ↑ 이 개념을 다루는 도구가 "Hooks"
  │
  └── 구체적인 기능/API (Features/APIs)
        └── React Hooks (리액트 훅스)
              ├── useState (상태 개념을 구현)
              ├── useEffect (생명주기/부수 효과 구현)
              └── useContext, useReducer 등...

🧰 React Library vs React Hooks

비교 항목	React Library	React Hooks
정의	UI 구축을 위한 전체 라이브러리	React 내부에 포함된 기능(API)
역할	컴포넌트 구조, 렌더링, 가상 DOM 관리	상태(state), 생명주기(lifecycle) 구현
형태	라이브러리 자체	함수(Function)
예시	ReactDOM, JSX, 컴포넌트	useState, useEffect, useContext

✅ 결론
React는 전체 도구 상자,
Hooks는 그 안에 들어 있는 특정한 도구 모음입니다.
즉, 서로 다른 게 아니라 Hooks는 React의 일부입니다.

🧭 React Hooks vs React Router

많은 초보자들이 헷갈리는 또 다른 부분이 바로 “React Hooks”와 “React Router”의 차이입니다.

구분	React Hooks	React Router
목적	컴포넌트 내부의 상태 관리 및 생명주기 처리	페이지 간 이동 및 URL 관리
기능	useState, useEffect, useContext 등	BrowserRouter, Route, Link, useNavigate 등
범위	단일 컴포넌트 로직 중심	애플리케이션 전체의 내비게이션 구조
설치 여부	React에 기본 내장	별도 패키지 `react-router-dom` 설치 필요

💬 정리하자면,

Hooks는 “컴포넌트 내부” 로직을 다루고,

Router는 “페이지 간 이동”을 다룹니다.
서로 다른 목적의 도구이지만, 함께 사용하여 완전한 SPA(Single Page Application)를 구축할 수 있습니다.

리액트 구조 이해하기

전체적인 관계는 다음과 같이 정리할 수 있습니다.

1. 최상위 카테고리: React (리액트)

이것이 가장 큰 범주이자 핵심입니다. React는 웹 UI를 구축하기 위한 라이브러리 자체를 의미합니다.

2. React의 핵심 개념 (Concepts)

'리액트 개념'은 React 라이브러리를 사용하기 위해 알아야 하는 근본적인 원리와 아이디어들을 말합니다. 이것들은 'React' 카테고리 바로 아래에 속하며, 훅(Hooks)보다 더 추상적이고 근본적인 내용들입니다.

주요 개념들은 다음과 같습니다.

컴포넌트 (Component): UI를 독립적인 조각으로 나누는 것.
JSX: JavaScript 안에서 HTML 문법을 사용하는 것.
가상 DOM (Virtual DOM): 효율적인 화면 업데이트를 위한 React의 내부 작동 방식.
프롭스 (Props): 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방식.
상태 (State): 컴포넌트 내부에서 변경 가능한 데이터를 관리하는 방식.

3. React의 기능/API: React Hooks (리액트 훅스)

Hooks는 위에서 언급한 **"상태 (State) 관리"**나 "생명주기" 같은 개념들을 **함수형 컴포넌트에서 실제로 구현하고 사용할 수 있게 해주는 구체적인 도구(API)**입니다.

최종적인 계층 구조

이해하기 쉽게 계층 구조로 나타내면 다음과 같습니다.

● React (리액트 라이브러리 전체)
  ├── 핵심 개념 (Concepts)
  │     ├── 컴포넌트 (Component)
  │     ├── JSX
  │     ├── 가상 DOM (Virtual DOM)
  │     ├── Props (프롭스)
  │     └── State (상태)  <-- 이 개념을 다루는 도구가 훅입니다.
  │
  └── 구체적인 기능/API (Features/APIs)
        └── React Hooks (리액트 훅스)
              ├── useState (상태 개념을 구현)
              ├── useEffect (부수 효과/생명주기 개념을 구현)
              └── useContext, useReducer 등...

결론:

리액트 개념은 React를 이루는 추상적인 원리들입니다.
리액트 훅스는 그 원리들을 코드 상에서 구현하는 구체적인 도구입니다.

모두 'React'라는 큰 틀 안에 속해 있습니다.

React Library vs React Hooks

React Hooks (리액트 훅스) 랑 리액트 아리브러리는 다른거야?

1. React 라이브러리 (React Library)

React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. 웹 애플리케이션의 뷰(View) 레이어를 담당하며, 다음을 포함한 광범위한 기능을 제공합니다.

컴포넌트 기반 구조: UI를 독립적이고 재사용 가능한 부품(컴포넌트)으로 나누는 방식
가상 DOM (Virtual DOM): 효율적인 UI 업데이트 메커니즘
JSX: JavaScript 확장 문법
렌더링 및 생명주기 관리

2. React Hooks (리액트 훅스)

Hooks는 React 라이브러리 버전 16.8에서 새로 도입된 기능(API) 모음입니다.

목적: 기존의 클래스형 컴포넌트에서만 사용할 수 있었던 state (상태) 관리나 lifecycle (생명주기) 기능을 함수형 컴포넌트에서도 사용할 수 있도록 만들어진 특별한 함수들입니다.
예시: useState, useEffect, useContext, useReducer 등

결론

React는 전체 도구 상자(라이브러리)입니다.
React Hooks는 그 도구 상자 안에 있는 특정 종류의 강력한 도구(API)들입니다.

따라서 "React Hooks와 React 라이브러리는 다른 것인가요?"라는 질문에 대한 답은 "아니요, Hooks는 React라는 큰 라이브러리의 핵심적인 최신 기능 중 하나입니다"입니다.

React Hooks vs React Router

React Hooks와 React Router는 React 애플리케이션에서 사용되는 목적과 역할이 완전히 다릅니다.

React Hooks (리액트 훅스)

목적: 함수형 컴포넌트 내에서 React의 핵심 기능인 상태(state) 관리 및 생명주기 기능을 사용할 수 있게 해주는 함수들입니다.
역할: useState, useEffect, useContext 등과 같은 훅을 사용하여 컴포넌트의 동적인 데이터 관리, 부수 효과 처리 등을 수행합니다.
범위: 단일 컴포넌트 또는 컴포넌트 간의 로직 재사용을 위해 사용됩니다. React 라이브러리 자체에 내장되어 있습니다.

React Router (리액트 라우터)

목적: 싱글 페이지 애플리케이션(SPA)에서 라우팅(Routing), 즉 URL 경로에 따라 다른 화면(컴포넌트)을 보여주는 기능을 구현하기 위한 외부 라이브러리입니다.
역할: 사용자가 브라우저 주소를 변경하거나 링크를 클릭할 때, 페이지 전체를 새로고침하지 않고 해당 URL에 매핑된 컴포넌트만 동적으로 렌더링합니다. BrowserRouter, Routes, Route, Link, useNavigate 등의 컴포넌트 및 훅을 사용합니다.
범위: 애플리케이션의 내비게이션 구조와 페이지 간 이동을 관리합니다. 별도 패키지(react-router-dom)로 설치해야 합니다.

요약:

Hooks는 컴포넌트 내부의 상태와 로직을 다룹니다.
Router는 애플리케이션의 페이지 이동과 URL 관리를 다룹니다.

서로 다른 문제를 해결하기 위한 도구이며, 종종 React Router 라이브러리 내에서도 useNavigate, useLocation과 같은 자체적인 라우터 훅이 사용되기도 합니다

🧩 최종 정리

구분	내용
React	UI를 만드는 전체 라이브러리
React의 핵심 개념 (Concepts)	컴포넌트, JSX, Virtual DOM, Props, State
React Hooks (API)	핵심 개념을 실제 코드에서 다루는 함수형 도구
React Router	페이지 이동과 라우팅을 담당하는 외부 라이브러리

🏁 결론

React는 큰 틀, 즉 “UI를 만드는 도구 상자”입니다.
React Hooks는 그 안에서 상태 관리와 생명주기 제어를 담당하는 기능들입니다.
React Router는 페이지 이동이라는 별도의 문제를 해결하기 위한 외부 라이브러리입니다.

이 구조를 이해하면 리액트 생태계 전체가 머릿속에 한눈에 그려질 거예요! 🌱

이 블로그 검색

Faith & Tech