[React] React.js 강좌 1. 리액트 기초 개념 정리
1. 리액트란 무엇인가?
웹페이지가 정적인 시절에는 HTML과 CSS로만도 충분했습니다.
하지만 요즘은 버튼을 누를 때마다 화면이 바뀌고, 데이터를 불러오고,
심지어 페이지 전체가 새로고침 없이 움직이죠.
이런 동적인 웹 인터페이스를 효율적으로 관리하기 위해 등장한 라이브러리가 바로 React.js입니다.
React는 **페이스북(현 Meta)**에서 개발한 UI 라이브러리로,
“화면의 상태(state)에 따라 UI를 자동으로 업데이트”해주는 역할을 합니다.
기존의 JavaScript에서는 화면을 바꿀 때마다
document.getElementById() 같은 코드로 직접 DOM을 수정해야 했습니다.
이 방식은 코드가 많아질수록 유지보수가 어려워집니다.
React는 이런 문제를 해결하기 위해 Virtual DOM이라는 개념을 도입했습니다.
2. Virtual DOM이란?
**Virtual DOM(가상 돔)**은 실제 브라우저의 DOM을 그대로 흉내 낸 메모리상의 복제본입니다.
React는 화면의 상태가 바뀔 때마다 새로운 Virtual DOM을 만들고,
이전 버전과 비교해 변화가 생긴 부분만 실제 DOM에 반영합니다.
이 과정을 **Reconciliation(재조정)**이라고 부릅니다.
이 덕분에 React는 빠른 렌더링 속도와 예측 가능한 업데이트 흐름을 유지합니다.
즉, DOM 전체를 새로 그리는 대신
“바뀐 부분만 찾아서” 수정하는 방식이죠.
3. React의 철학 – 선언형 UI
React의 가장 큰 특징은 **선언형(Declarative)**입니다.
즉, “어떻게 업데이트할지”를 직접 작성하지 않고
“결과적으로 어떤 UI를 보여줄지”만 선언합니다.
예를 들어 기존 JS에서는 이렇게 작성합니다.
const button = document.getElementById('btn');
button.addEventListener('click', () => {
document.getElementById('text').innerText = '클릭됨!';
});
React에서는 이렇게 간단히 표현할 수 있습니다.
function App() {
const [clicked, setClicked] = useState(false);
return (
<button onClick={() => setClicked(true)}>
{clicked ? '클릭됨!' : '클릭해주세요'}
</button>
);
}
React는 clicked 상태가 바뀌면 자동으로 화면을 다시 그려주기 때문에,
우리는 **“상태 중심으로 UI를 설계”**하면 됩니다.
4. React 프로젝트 시작하기
리액트를 시작하려면 Node.js가 설치되어 있어야 합니다.
https://nodejs.org/ko/
위 사이트에서 LTS 버전(안정 버전)을 설치합니다.
설치 후 터미널(또는 명령 프롬프트)에서 아래 명령을 입력하세요.
npx create-react-app my-first-react
이 명령은 my-first-react 폴더에 React 프로젝트를 자동으로 구성해줍니다.
생성된 폴더 구조는 대략 아래와 같습니다.
my-first-react/
┣ src/
┃ ┣ App.js
┃ ┣ index.js
┗ public/
┗ index.html
프로젝트 폴더로 이동 후 React 개발 서버를 실행합니다.
cd my-first-react
npm start
잠시 후 브라우저에서
http://localhost:3000
주소로 접속하면 React 초기 화면이 표시됩니다.
5. Hello World 출력해보기
src/App.js 파일을 열어 다음과 같이 수정합니다.
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React World!</h1>
</div>
);
}
export default App;
저장 후 브라우저를 새로고침하면
“Hello, React World!” 문구가 출력됩니다.
이것이 React의 기본 구조입니다.
App 컴포넌트가 하나의 **화면 단위(컴포넌트)**를 담당하고,
index.js에서 이 App 컴포넌트를 브라우저에 렌더링합니다.
6. JSX란 무엇인가?
React에서는 HTML처럼 생긴 문법을 사용하지만,
실제로는 JavaScript의 확장 문법입니다.
이를 **JSX (JavaScript XML)**이라고 부릅니다.
아래 코드를 보죠.
const element = <h1>Hello JSX!</h1>;
이건 HTML처럼 보이지만, 실제로는 JavaScript로 변환되어 실행됩니다.
JSX는 내부적으로 React.createElement()로 컴파일되어,
Virtual DOM 구조를 만듭니다.
JSX 내부에서는 JavaScript 변수도 자유롭게 쓸 수 있습니다.
예를 들어,
const name = '기범';
const element = <h1>안녕하세요, {name}님!</h1>;
이렇게 하면 화면에는 “안녕하세요, 기범님!”이 출력됩니다.
7. 마무리 및 정리
이번 글에서는 리액트의 철학과 핵심 개념인
Virtual DOM, 선언형 UI, JSX, Hello World까지 살펴봤습니다.
이 내용만 제대로 이해해도
React가 “DOM을 직접 다루지 않아도 되는 이유”를 완벽히 알 수 있습니다.
다음 편에서는 리액트에서 가장 중요한 개념 중 하나인
Props와 State를 다룹니다.
즉, “데이터가 어떻게 흐르고, 컴포넌트가 어떻게 반응하는가”를 배웁니다.