01. React란 무엇인가?
1. React란?
React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리입니다.
웹페이지를 여러 개의 작은 컴포넌트(Component)로 나누어 개발할 수 있으며, 각 컴포넌트를 재사용하여 유지보수가 쉽고 효율적인 웹 애플리케이션을 만들 수 있습니다.
React는 2013년 Meta(구 Facebook)에서 공개했으며, 현재 가장 많이 사용되는 프론트엔드 기술 중 하나입니다.
2. React를 사용하는 이유
기존 HTML, CSS, JavaScript만으로도 웹사이트를 만들 수 있지만, 프로젝트 규모가 커질수록 코드 관리가 어려워집니다.
React는 이러한 문제를 해결하기 위해 다음과 같은 장점을 제공합니다.
컴포넌트 기반 개발
재사용 가능한 코드
빠른 화면 업데이트
유지보수 용이
대규모 프로젝트에 적합
예를 들어 동부산CC 프로젝트를 만든다면 하나의 페이지를 아래와 같이 나눌 수 있습니다.
Header
Hero
Course
Gallery
Reservation
Notice
Footer
각각 독립적인 컴포넌트가 되어 필요할 때마다 재사용할 수 있습니다.
3. React와 기존 HTML의 차이
기존 HTML 방식
하나의 HTML 파일 안에 모든 내용을 작성합니다.
<header></header>
<section></section>
<footer></footer>
페이지가 커질수록 코드가 길어지고 관리가 어려워집니다.
React 방식
각 영역을 컴포넌트로 분리합니다.
<Header />
<Hero />
<Course />
<Footer />
필요한 컴포넌트만 수정하면 되므로 유지보수가 훨씬 편리합니다.
4. Virtual DOM
React는 Virtual DOM(가상 DOM)을 사용합니다.
일반 JavaScript는 화면이 변경될 때 실제 DOM을 직접 수정합니다.
React는 먼저 메모리 안에 있는 Virtual DOM을 변경한 후 이전 상태와 비교하여 필요한 부분만 실제 DOM에 반영합니다.
이 방식을 통해 불필요한 화면 갱신을 줄이고 성능을 높일 수 있습니다.
5. SPA(Single Page Application)
React는 SPA(Single Page Application) 개발에 많이 사용됩니다.
기존 웹사이트는 페이지를 이동할 때마다 새로운 HTML 파일을 다시 불러옵니다.
index.html
↓
about.html
↓
contact.html
React는 하나의 페이지에서 필요한 화면만 변경합니다.
App
↓
Home
↓
Course
↓
Gallery
↓
Reservation
덕분에 화면 전환이 자연스럽고 사용자 경험이 향상됩니다.
6. React의 핵심 개념
React를 공부하면서 가장 먼저 이해해야 할 개념은 다음과 같습니다.
JSX
Component
Props
State(useState)
Event
useEffect
React Router
이 개념들이 React 개발의 기본이 됩니다.
7. React를 배우기 전에 필요한 기초
React는 JavaScript를 기반으로 동작하기 때문에 아래 내용을 먼저 이해하는 것이 중요합니다.
HTML 구조 작성
CSS 스타일링
JavaScript 변수와 함수
조건문과 반복문
배열과 객체
DOM과 이벤트 처리
JavaScript 기초가 탄탄할수록 React를 배우기가 훨씬 수월합니다.
8. React 학습 목표
이번 React 학습의 목표는 단순히 문법을 익히는 것이 아니라 실제 프로젝트를 만들 수 있는 수준에 도달하는 것입니다.
예를 들어 다음과 같은 프로젝트를 React로 구현하는 것을 목표로 합니다.
동부산CC 웹사이트
골프 커뮤니티
AI 교육센터
부산 오늘 뭐하지
개인 포트폴리오 사이트
마무리
React는 새로운 프로그래밍 언어가 아니라 JavaScript를 기반으로 사용자 인터페이스를 효율적으로 개발하기 위한 라이브러리입니다.
컴포넌트 기반 개발 방식과 Virtual DOM을 통해 코드의 재사용성과 유지보수성을 높일 수 있으며, 현대 웹 개발에서 가장 널리 사용되는 기술 중 하나입니다.
앞으로 JSX, 컴포넌트, Props, State, 이벤트 처리 등을 차례대로 학습하면서 실제 프로젝트에 적용해 나갈 예정입니다.
1. React란?
React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리입니다.
웹페이지를 여러 개의 작은 컴포넌트(Component)로 나누어 개발할 수 있으며, 각 컴포넌트를 재사용하여 유지보수가 쉽고 효율적인 웹 애플리케이션을 만들 수 있습니다.
React는 2013년 Meta(구 Facebook)에서 공개했으며, 현재 가장 많이 사용되는 프론트엔드 기술 중 하나입니다.
2. React를 사용하는 이유
기존 HTML, CSS, JavaScript만으로도 웹사이트를 만들 수 있지만, 프로젝트 규모가 커질수록 코드 관리가 어려워집니다.
React는 이러한 문제를 해결하기 위해 다음과 같은 장점을 제공합니다.
컴포넌트 기반 개발
재사용 가능한 코드
빠른 화면 업데이트
유지보수 용이
대규모 프로젝트에 적합
예를 들어 동부산CC 프로젝트를 만든다면 하나의 페이지를 아래와 같이 나눌 수 있습니다.
Header
Hero
Course
Gallery
Reservation
Notice
Footer
각각 독립적인 컴포넌트가 되어 필요할 때마다 재사용할 수 있습니다.
3. React와 기존 HTML의 차이
기존 HTML 방식
하나의 HTML 파일 안에 모든 내용을 작성합니다.
<header></header>
<section></section>
<footer></footer>
페이지가 커질수록 코드가 길어지고 관리가 어려워집니다.
React 방식
각 영역을 컴포넌트로 분리합니다.
<Header />
<Hero />
<Course />
<Footer />
필요한 컴포넌트만 수정하면 되므로 유지보수가 훨씬 편리합니다.
4. Virtual DOM
React는 Virtual DOM(가상 DOM)을 사용합니다.
일반 JavaScript는 화면이 변경될 때 실제 DOM을 직접 수정합니다.
React는 먼저 메모리 안에 있는 Virtual DOM을 변경한 후 이전 상태와 비교하여 필요한 부분만 실제 DOM에 반영합니다.
이 방식을 통해 불필요한 화면 갱신을 줄이고 성능을 높일 수 있습니다.
5. SPA(Single Page Application)
React는 SPA(Single Page Application) 개발에 많이 사용됩니다.
기존 웹사이트는 페이지를 이동할 때마다 새로운 HTML 파일을 다시 불러옵니다.
index.html
↓
about.html
↓
contact.html
React는 하나의 페이지에서 필요한 화면만 변경합니다.
App
↓
Home
↓
Course
↓
Gallery
↓
Reservation
덕분에 화면 전환이 자연스럽고 사용자 경험이 향상됩니다.
6. React의 핵심 개념
React를 공부하면서 가장 먼저 이해해야 할 개념은 다음과 같습니다.
JSX
Component
Props
State(useState)
Event
useEffect
React Router
이 개념들이 React 개발의 기본이 됩니다.
7. React를 배우기 전에 필요한 기초
React는 JavaScript를 기반으로 동작하기 때문에 아래 내용을 먼저 이해하는 것이 중요합니다.
HTML 구조 작성
CSS 스타일링
JavaScript 변수와 함수
조건문과 반복문
배열과 객체
DOM과 이벤트 처리
JavaScript 기초가 탄탄할수록 React를 배우기가 훨씬 수월합니다.
8. React 학습 목표
이번 React 학습의 목표는 단순히 문법을 익히는 것이 아니라 실제 프로젝트를 만들 수 있는 수준에 도달하는 것입니다.
예를 들어 다음과 같은 프로젝트를 React로 구현하는 것을 목표로 합니다.
동부산CC 웹사이트
골프 커뮤니티
AI 교육센터
부산 오늘 뭐하지
개인 포트폴리오 사이트
마무리
React는 새로운 프로그래밍 언어가 아니라 JavaScript를 기반으로 사용자 인터페이스를 효율적으로 개발하기 위한 라이브러리입니다.
컴포넌트 기반 개발 방식과 Virtual DOM을 통해 코드의 재사용성과 유지보수성을 높일 수 있으며, 현대 웹 개발에서 가장 널리 사용되는 기술 중 하나입니다.
앞으로 JSX, 컴포넌트, Props, State, 이벤트 처리 등을 차례대로 학습하면서 실제 프로젝트에 적용해 나갈 예정입니다.
#01. React란 무엇인가?