리액트의 특징
리액트의 탄생
리액트는 복잡한 웹 서비스를 쉽고 빠르게 개발할 수 있는 Node.js의 라이브러리 가운데 하나이며, 변화가 자주 일어나는 대규모 애플리케이션을 구축할 때 필요한 여러 기능을 구비하고 있음
컴포넌트 기반의 유연성
중복 코드와 유연하지 못한 구조
// index.html
<!DOCTYPE html>
<html>
<body>
<header>
<h1>안녕하세요 이정환입니다</h1>
</header>
<article>
<h3>여기는 HOME입니다</h3>
</article>
</body>
</html>
컴포넌트 기반의 유연한 구조
리액트는 여러 페이지에서 공통으로 사용하는 코드를 '컴포넌트' 단위의 모듈로 만들어 놓고 필요할 때 호출해 사용하는 '모듈화'를 이용해 중복 코드를 제거함
컴포넌트란?
리액트에서는 HTML 요소를 반환하는 함수를 '컴포넌트'라고 함
// MyHeader.js
function MyHeader() {
return (
<header>
<h1>안녕하세요 이정환입니다</h1>
</header>
);
}
// index.html
<!DOCTYPE html>
<html>
<body>
<MyHeader />
<article>
<h3>여기는 HOME입니다</h3>
</article>
</body>
</html>
쉽고 간단한 업데이트
돔(Dom)이란?
- 문서 객체 모델 (Document Object Model)
- HTML 코드를 트리 형태로 변환한 구성물
- 브라우저가 직접 생성하며, HTML 코드를 렌더링하기 위해 만듦
업데이트란?
돔 API (Application Programming Interface) 로 돔을 조작해서, 웹 페이지의 정보를 교체하여 페이지를 새롭게 렌더링하는 일
// "인사말 바꾸기" 버튼을 클릭하면, "안녕하세요!"가 "반가워요!"로 변경됨
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script>
function onClickButton() {
const h1Elm = document.getElementById("h1");
h1Elm.innerText = "반가워요!";
}
</script>
</head>
<body>
<h1 id="h1">안녕하세요!</h1>
<button onclick="onClickButton()">인사말 바꾸기</button>
</body>
</html>
! 리액트는 사용자의 특정 행동이 일어나거나 데이터가 바뀌어 업데이트가 필요하면, 교체가 필요한 요소는 삭제하고, 새롭게 수정 사항을 반영한 요소를 다시 만들어 통째로 업데이트 하므로, 어떤 부분을 어떻게 업데이트할지 고민하지 않아도 간단하게 페이지를 업데이트 할 수 있음
빠른 업데이트
브라우저는 어떻게 페이지를 표시할까?
브라우저의 렌더링 과정
1. HTML 코드를 해석해 돔으로 변환하고, CSS 코드를 해석해 스타일 규칙으로 변환
2. 돔과 스타일 규칙을 합쳐 렌더 트리를 만듦
3. 렌더 트리 정보를 바탕으로 요소의 위치를 픽셀 단위로 계산하는 레이아웃 작업 수행 (많은 연산 필요)
4. 레이아웃 작업을 거친 정보를 바탕으로 요소를 실제로 페이지에 그리는 페인팅 작업 (많은 연산 필요)
버추얼 돔을 이용한 효율적인 업데이트
버추얼 돔이란?
가상의 돔이라는 뜻으로, 실제 돔의 사본임
! 리액트에서는 페이지에서 변경 사항이 발생하면 먼저 버추얼 돔을 업데이트하는 식으로 변경 사항을 모았다가 한 번에 실제 돔을 업데이트 함
리액트 앱 만들기
리액트 앱은 리액트로 만든 웹 서비스로서, 마치 애플리케이션처럼 다양하게 상호작용할 수 있는 기능을 제공하기 때문에 앱으로 부름
Create React App으로 리액트 앱 만들기 (npm create vite@latest 로 변경 필요)
리액트 앱을 만들기 위해 Create React App (CRA) 이라는 Node.js 라이브러리를 이용하며, CRA처럼 복잡한 설정 없이 쉽게 프로젝트를 생성하도록 돕는 개발 도구를 '보일러 플레이트'라고 함
폴더를 생성하고 터미널에서 명령어 입력 ( 점(.)은 현재 폴더를 의미)
> npx create-react-app .
npx란?
npx(Node Package Execute)는 '노드 패키지 실행'이라는 뜻의 명령어로서, 특정 라이브러리를 항상 최신 버전으로 실행함
리액트 앱의 구성 요소 살펴보기
Node.js 패키지 구성 파일 + 템플릿 (앱이 동작하는 데 필요한 파일과 폴더를 자동으로 생성하며, 이런 파일과 폴더 모음)
- package.json, package-lock.json, node_modules 같은 Node.js 패키지 구성 파일
- package.json에서 'dependencies' 항목에 기록된 라이브러리
- public 폴더: 리액트에서 공통으로 사용하는 폰트 파일, 이미지 파일 등을 저장하는 폴더
- src 폴더: 프로그래밍 소스를 저장하는 폴더
리액트 앱 실행하기
앱 실행
> npm run start
자동으로 크롬 웹 브라우저에서 새 탭이 열리면서 앱의 주소인 http://localhost:3000에 접속됨
앱 종료
터미널에서 Ctrl + C 단축키
리액트 앱의 동작 원리
리액트 앱에는 어떻게 접속하는 걸까?
Create React App으로 만든 리액트 앱에는 웹 서버가 내장되어 있으므로, npm run start 명령을 실행하면 브라우저가 리액트 앱에 접속하도록 앱에 내장된 웹 서버가 동작하여, 내장된 웹 서버 주소로 브라우저가 자동으로 접속함
http://localhost:3000
리액트 앱의 동작 원리 상세 보기
1. localhost:3000으로 접속을 요청하면, public 폴더의 index.html을 반환합니다.
2. 리액트 앱에 접속하면 자동으로 index.html에 추가되는 <script> 태그는, src 폴더의 index.js와 해당 파일이 가져오는 자바스크립트 파일을 한데 묶어놓은 bundle.js를 불러옵니다.
3. bundle.js가 실행되어 index.js에서 작성한 코드가 실행됩니다.
4. index.js는 ReactDOM.createRoot 메서드로, 돔에서 리액트 앱의 루트가 될 요소를 지정합니다.
5. render 메서드를 사용해 돔의 루트 아래에 자식 컴포넌트를 추가하고, 결과적으로 추가된 자식 컴포넌트가 렌더링됩니다.
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
// index.js
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// App.js
function App() {
return (
<div className="App">
...
</div>
);
}
export default App;
