React란? – 개념·구조·장점 한눈에 보기

01. 리액트 소개

                        _ React란 무엇이고, 왜 필요한가? 

---

1. 리액트란 무엇인가? _ 정의와 역할

• React는 Facebook(메타)에서 개발한 UI(사용자 인터페이스) 구축용 JavaScript 라이브러리입니다.
• 복잡한 웹 화면을 빠르고 효율적으로 만들 수 있게 해줍니다.
• 컴포넌트라는 독립적인 단위로 UI를 쪼개서, 재사용과 유지보수가 쉽도록 설계되었습니다.

---

2. 왜 리액트가 필요한가? _ 필요성

• 동적인 UI: 데이터가 자주 바뀌는 화면을 효율적으로 관리
• 코드 재사용 및 유지보수: 컴포넌트별로 분리하여 협업과 관리가 쉬움
• 대규모 웹앱에 적합: 구조가 명확해 협업에 유리

---

3. 리액트와 전통적 JavaScript의 차이_비교

(1) 구조적 차이

• 일반 JavaScript
  : 직접 DOM을 선택하고 조작, 코드가 길어지고 복잡해짐
• React
  : 컴포넌트 기반으로 화면을 나누고, 각 부품처럼 재사용

 

(2) UI 처리 방식의 차이

• 일반 JavaScript: DOM 전체를 직접 갱신
• React: Virtual DOM을 이용, 변경된 부분만 효율적으로 갱신

(3) React vs JavaScript 비교 표  

구분	JavaScriptReact	React
UI 구성 방식	직접 DOM 조작, 함수/변수로 분리	컴포넌트 단위로 조립/관리
코드 재사용	낮음	높음 (컴포넌트 재활용)
상태 관리	개별 관리, 일관성 떨어짐	State, Props로 체계적 관리
성능	전체 DOM 갱신(비효율적)	Virtual DOM, 변경분만 반영
프로젝트 규모	소규모에 적합	대규모/협업에 적합

 

 

---

4. 리액트의 핵심 개념 정리

개념설명

 

용어	개념설명
컴포넌트	UI를 구성하는 독립적 부품(함수/클래스 형태)
JSX	자바스크립트에 HTML 태그처럼 작성할 수 있는 특수 문법
Props	컴포넌트에 값을 전달하는 방법 (매개변수 느낌)
State	컴포넌트 내부에서 관리하는 데이터(상태)
생명주기	컴포넌트 생성/변경/소멸 등 변화 흐름 제어

 

 

---

5. 리액트 프로젝트 구조

• index.js: 진입점, React → 실제 DOM에 연결
• App.js: 주요 UI 작성 파일
• App.css: 스타일 작성
• index.html: HTML 뼈대, id="root"에 컴포넌트 삽입
• build/: 빌드시 생성되는 실제 서비스 파일

 

---

6. 리액트의 특징과 주요 장점

 

	특징/장점설명
컴포넌트 기반 구조	UI를 작은 부품처럼 재사용, 유지보수 쉬움
Virtual DOM	실제 DOM 변경 최소화, 렌더링 성능 향상
선언형 프로그래밍	UI의 ‘상태’만 선언하면 됨. 코드가 직관적
일방향 데이터 흐름	데이터가 부모→자식 방향으로 흐름, 예측 가능성↑
대규모 커뮤니티	다양한 라이브러리와 자료, 오픈소스 풍부

 

---

 

7. React는 프레임워크인가, 라이브러리인가?

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

   ┌───────────────────────┐
   │         Code          │
   └───────────────────────┘
                       ▲
      │                │
내 코드에서          내 코드를
  호출             프레임워크가 호출
      │                │
      ▼
   ┌─────────┐    ┌────────────┐
   │ Library │    │ Framework  │
   └─────────┘    └────────────┘
      └───────포함─────────┘

• Library(라이브러리):
  → 내가 필요할 때 직접 불러서 사용하는 도구 (내 코드가 주도)
• Framework(프레임워크):
  → 전체 흐름을 프레임워크가 관리하고,
       내 코드를 “프레임워크가 필요할 때” 불러줌 (프레임워크가 주도)

(2) 용어 혼용에 대한 다양한 관점

React가 '프레임워크'인지 '라이브러리'인지는 참고하는 자료, 강사, 실무 방식에 따라 다양하게 설명됩니다.
아래 표는 각 입장별로 한눈에 볼 수 있게 정리한 내용입니다.

구분React를 부르는 명칭이유 및 관점

 

구분	React를 부르는 명칭	이유 및 관점
공식문서	UI 라이브러리	UI(화면)에만 집중, 핵심만 제공, 확장 조합은 개발자 몫
생활코딩/책	UI 라이브러리	초보자 입장에서 기능 한정, 추가 기능은 별도 학습
학원/강사	프레임워크	실제 개발에선 상태관리, 라우팅 등 다양한 조합 필수, 프레임워크처럼 사용
실무/현장	혼용(둘 다 사용)	프로젝트 구조/개발방식 따라 프레임워크 역할처럼 활용하기도 함

 

 

※ 결론: React는 “UI 라이브러리”로 출발했지만,
다양한 도구와 조합해 “프레임워크”처럼 활용되기도 함.
공식 입장은 "UI 라이브러리"에 가깝지만, 실제 현장/교육에서는 용어가 혼용됩니다.

 

 

 

 

---

8. React의 주요 특징 요약

• 컴포넌트 기반 구조: 독립적으로 동작, 재사용성 ↑
• Virtual DOM: 빠른 렌더링, 효율적 업데이트
• Props/State: 데이터 관리의 중심, 단방향 데이터 흐름
  • Props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 수단으로, 리액트의 핵심 개념 중 하나입니다.데이터는 단방향으로 전달되며 자식은 이를 수정할 수 없는 읽기 전용 데이터입니다.
  • State는 컴포넌트의 데이터를 저장하는 변수이며,값이 변경되면 자동으로 리렌더링되어 화면이 갱신되는 기준점입니다.
• 선언형 프로그래밍: UI 결과만 선언, 복잡한 조작 최소화
• 강력한 커뮤니티/생태계: 다양한 라이브러리 및 툴
• JSX: JS와 HTML 결합, 가독성 ↑

// JSX 문법이를 통해 JavaScript 코드 안에서 UI 관련 작업을 직관적으로 할 수 있습니다. 
const App = () => {
  const hello = 'Hello world!';
  return <div>{hello}</div>;
};

 

---

9. React 시작하기 (설치/프로젝트 생성)

React를 시작하려면 Node.js 설치 → Create React App 사용

npx create-react-app my-app
cd my-app
npm start

• 위 명령어로 기본 React 프로젝트를 만들고, 개발 서버를 바로 실행할 수 있음

---

10. 결론

• React는 현대 웹 개발에서 표준처럼 사용되는 UI 개발 도구입니다.
• 복잡한 화면과 대규모 프로젝트, 협업에 특히 강점을 가집니다.
• Virtual DOM, 컴포넌트 구조, JSX 등 다양한 장점 덕분에 많은 개발자들이 선택합니다.
• 다양한 라이브러리/프레임워크와 결합하여 유연하게 확장 가능합니다.

 

 

 

• 참고자료
  • 생활코딩 [React 리액트 프로그래밍]
  • 더조은컴퓨터아카데미 리액트 주말반
  • React 공식문서
  저작권 안내:
  이 글은 공식문서, 생활코딩, 기타 교육자료를 참고하여 2차 가공/정리한 자료입니다.
  원문은 각 출처의 저작권 정책을 준수하세요.