한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 by 이정환

📌 React.js를 소개합니다

리액트의 기술적인 특징

• 컴포넌트를 기반으로 UI를 표현
• 화면 업데이트 구현이 쉬움
• 화면 업데이트가 빠르게 처리

모든 내용을 완벽히 이해할 필요 없고, 완강 후 다시 보는 걸 추천한다 함
나는 리액트 공부 2회차(?)이니까 열심히 보려고 함

1️⃣ 컴포넌트를 기반으로 UI 표현

컴포넌트란?

화면을 구성하는 가장 작은 UI 조각

컴포넌트로 인해 화면의 구성 요소, 각각의 영역을 모듈화해서 보관 가능
➡️ 중복 코드 제거(아주 큰 장점)

컴포넌트를 쓰는 장점

만약, 메인 페이지, 상품 상세 페이지, 주문 페이지 등에서 모두 같은 헤더 메뉴를 갖고 있다면 각 페이지가 모두 헤더 메뉴 코드를 갖고 있을 것임

이때, 헤더 메뉴에 수정이 생길 경우 헤더 메뉴를 가진 모든 페이지의 코드를 수정해야 함

그러나 컴포넌트를 쓰면,
헤더 내에 수정이 생겨도 해당 컴포넌트만 수정하고
각 페이지는 그 컴포넌트를 가져오면 됨
➡️ 유지보수에 용이

2️⃣ 화면 업데이트 구현이 쉬움

업데이트란?

사용자의 행동(클릭, 드래그)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용하는 것

리액트는 화면 업데이트를 구현하기 쉽다
선언형 프로그래밍으로 동작하기 때문
과정은 생략하고 이루고자 하는 목적만 간결히 명시

예를 들면,
식당에서 음식을 주문할 때
"토마토 파스타 하나 주세요."
그러나 이때, 토마토 파스타를 만드는 과정은 알 필요가 없음

이와 반대로 명령형 프로그래밍이 있음
목적을 이루기 위한 모든 일련의 과정 설명

주방으로 가서 면 100g을 꺼내세요. 그리고 물에 9분간 삶으세요. 
후라이팬을 꺼내 불을 올리고 토마토 소스와 함께 볶으세요. 만테까레 필수입니다.

(진상 손님인가?)

근데 원래 프로그래밍은 이런 식임

리액트를 사용하지 않고 자바스크립트만으로 업데이트를 구현하면
특별한 도구를 사용하지 않을 때
대부분 명령형 프로그래밍 방식으로 모든 기능을 구현해야 함

리액트는 어떻게 업데이트가 빠른가?

리액트로 만든 각각의 컴포넌트는 state라는,
컴포넌트의 상태를 저장하는 특수한 변수가 있음

이 state 값이 바뀌면,
컴포넌트가 바뀐 state 값에 따라서
각각 다른 UI를 화면에 렌더링하도록 설정 가능

C컴포넌트는 state 변수의 값에 따라서
값이 1일 때는 1번 UI를 렌더링,
값이 2일 때는 2번 UI를 렌더링하도록 함

즉, 화면 업데이트가 필요할 때, 컴포넌트가 가진 state 변수만 바꾸면
UI를 렌더링하기 편함

업데이트를 위한 복잡한 동작을 직접 정의할 필요 없이
특정 변수의 값을 바꾸는 것만으로도 화면 업데이트 가능

3️⃣ 화면 업데이트가 빠르게 처리

화면 업데이트를 쉽게 구현할 뿐만 아니라 빠르게 처리도 가능

업데이트란, 결국 브라우저가 페이지를 다시 렌더링하는 행위
버튼을 클릭했을 때 버튼의 색상을 파란색에서 빨간색으로 바꾸려면,
브라우저가 페이지를 다시 렌더링

그러니까 리액트가 어떻게 빠르게 업데이트해야하는지 알려면,
브라우저의 렌더링 과정을 먼저 이해해야 함

브라우저는 어떻게 페이지를 표시하는가?

브라우저는 어떻게 동작하는가?

Critical Rendering Path
: 반드시 꼭 거쳐야만 하는 중요한 경로

HTML 코드 ➡️ DOM 변환

HTML 코드를 해석해 돔으로 변환

CSS 코드 ➡️ CSSOM 변환

CSS코드도 해석해서 CSSOM(CSS Object Model, 스타일 규칙)으로 변환

DOM, CSSOM ➡️ Render Tree

페이지에 어떤 요소가 있고, 어디에 있는지를 아는 DOM과 DOM 각각의 요소에 스타일을 정의하는 스타일 규칙을 합쳐 렌더 트리(Render Tree)를 만듦 = 웹 페이지의 청사진/설계도
(돔 = 요소들의 위치, 배치, 모양에 대한 정보)

레이아웃 단계

렌더 트리 정보를 바탕으로 요소의 위치를 픽셀 단위로 계산
= 요소의 배치를 잡는 작업
렌더링 과정에서 가장 많은 연산을 요구

페인팅 단계

레이아웃 작업의 결과를 바탕으로 요소를 실제로 페이지에 그림
페인팅 역시 렌더링 과정에서 가장 많은 연산을 요구

업데이트는 어떻게 이루어질까? 자바스크립트가 돔을 수정하면,

브라우저는 업데이트를 위해 렌더링 과정을 다시 반복

자바스크립트가 돔을 3,000번 수정하면,
렌더링 과정이 3,000번 일어남

위에서 언급했듯, 레이아웃(Reflow)과 페인팅(Repaint) 과정은 많은 연산을 동반
➡️ 돔의 업데이트가 필요 이상으로 많아지면 브라우저 성능 저하

브라우저의 성능이 떨어지면 응답이 느려지거나, 응답 불능 상태에 빠짐

[리스트 추가하기] 버튼을 클릭하면, 3000개의 목록을 추가하는 자바스크립트 코드

버튼을 클릭하면, onClick 함수 실행
$ul에 ul아이디를 가져온 태그를 가져와 저장,
그 태그의 innerHTML 값에 복합 대입 연산자로, li태그를 하나씩 더 추가

그런데 innerHTML의 값을 수정한다는 건,
돔을 수정하는 것과 같음
➡️ 3,000번 돔 수정

말했듯이
자바스크립트로 돔을 직접 수정해서 업데이트를 구현할 때는 돔 수정 횟수를 최소화하는 게 좋음

위와 같은 방식으로 코드 개선

ul 태그를 가져와 $ul에 저장하는 건 동일
그러나 그 다음 list 변수에 li 태그를 3000개 추가
➡️ 반복문 내에서는 innerHTML을 바로 수정하지 않음(DOM을 수정하지 않음)

반복문이 종료되고 맨 마지막에 한 번만 DOM 수정해서 list 추가

그러나 이러한 코드 개선이 쉬운 건 아님
단순하고 간단한 웹 서비스라면 그럴 수 있지만
대규모 서비스에서는 다뤄야 하는 업데이트도 동시에 발생하는 업데이트도 많음

리액트는 이러한 업데이트를 자동으로 진행해줌

어떻게?
버추얼 돔(Virtual DOM)을 이용

버추얼 돔을 이용한 효율적인 업데이트

버추얼 돔(Virtual DOM)이란?

가상의 돔, 실제 돔의 사본

리액트에서는 페이지에서 변경 사항이 발생하면 먼저 버추얼 돔을 업데이트
➡️ 버추얼 돔은, 일종의 버퍼처럼 변경사항을 모았다가 한 번에 실제 돔 업데이트

만약 업데이트가 발생한다면,

동시에 3개의 업데이트 발생

버추얼 돔에 3번의 변경 사항을 모두 업데이트
그리고 이 동안 실제 돔은 아무런 변화가 없음

변경 작업이 모두 종료되면, 변경 사항을 모았다가 한 번에 실제 돔 업데이트

결과적으로 리액트에서는 여러 번의 업데이트를 모아 한 번에 수행하므로 업데이트가 잦아도, 브라우저의 성능이 저하되지 않음

---

📌 첫 React App 생성하기

npm create vite@latest

npm 레지스트리에서 create-vite 패키지를 가져와 실행
create-vite : Vite 프로젝트를 빠르게 생성하는 도구
@latest : 가장 최신 버전 사용

React, JavaScript 선택하여 프로젝트 생성

기본 설정이 완료된 리액트 앱 생성

package.json

Node.js 패키지를 구성하는 핵심 파일

{
  "name": "section06",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.1.1",
    "react-dom": "^19.1.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.36.0",
    "@types/react": "^19.1.16",
    "@types/react-dom": "^19.1.9",
    "@vitejs/plugin-react": "^5.0.4",
    "eslint": "^9.36.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.22",
    "globals": "^16.4.0",
    "vite": "^7.1.7"
  }
}

"type": "module"
: Node 환경에서 ES Modules 방식을 사용
"scripts":~ : scripts 항목도 미리 설정
"dependencies":~
: 프로덕션(실제 서비스 환경)에서도 필요한 라이브러리 목록
"devDependencies":~
: 개발할 때나 사용되는 라이브러리
개발 시 사용할 문법 체크 도구나 활용할 테스트 도구
리액트 앱을 배포할 때 개발용 라이브러리는 미포함

현재 node_modules 폴더나, package-lock.json 파일은 아예 없는데
이때 터미널 안에

npm i

를 입력하면 라이브러리를 설치할 수 있음

public 폴더

• svg, png, jpg 같은 이미지 파일
• 폰트, 동영상 등 코드가 아닌 정적인 파일

➡️ 이미지나 폰트 등은 이 폴더에 추가
단, 브랜드 로고처럼 이름이 절대 바뀌면 안 되는 파일
외부에서 직접 접근해야 하는 정적 파일

src 폴더

• 소스 파일

➡️ 실제 작성한 리액트나 자바스크립트 코드는 이 폴더에 추가

asset 폴더

• 이미지, 폰트 같은 정적인 파일
  • 컴포넌트가 사용하는 이미지
  • CSS에서 사용하는 파일
  • 자바스크립트, 타입스크립트가 참조하는 정적 리소스

.eslintrc.cjs

eslint라는 도구의 설정 파일
코드 스타일을 통일하는 데에 도움을 주는 도구

.gitignore

리액트 앱을 깃허브에 올릴 때, 제외할 파일 명시

index.html

• 리액트 앱의 기본 틀 역할을 하는 html 코드가 담긴 파일
• 원래는 UI요소를 만들 때 다 html로 만들었지만,
  리액트에서는 UI를 직접 HTML에 쓰는 게 아니라,
  자바스크립트 함수로 만든 컴포넌트를 리액트가 index.html의 root에 DOM을 수정해서 추가하는 방식으로 동작

vite.config.js

• 리액트 앱을 만들 때 사용한 vite라는 도구의 옵션 설정

리액트 앱 실행

package.json의 scripts 항목 안에 리액트 앱을 실행시킬 수 있는 4가지의 명령어가 미리 설정

명령어	하는 일	언제 사용?
npm run dev	개발 서버 실행	개발할 때
npm run build	배포용 파일 생성	서비스 출시 준비할 때
npm run preview	빌드 결과물 미리보기	배포 전에 최종 점검
npm run lint	코드 스타일 및 오류 검사	코드 품질 체크할 때

npm run dev

로컬 환경에서 리액트 앱 작동

---

📌 리액트 앱 구동원리 살펴보기

index.html 파일을 살펴보면
<body> 태그가 텅텅 비어있음

그럼 브라우저에서 나타난 저 이미지와 텍스터와 카운터는 뭘까?

요소는 모두 <script> 태그로 불러오고,
src/main.jsx라는 자바스크립트 파일이 실행되었을 때
종적으로 추가되는 요소

따라서 index.html에 아무것도 없어도
main.jsx가 화면에 요소를 추가하는 것임

리액트가 제공하는 내부 메서드를 사용

ReactDOM의 createRoot라는 메서드는
인수로 전달받은 html요소를
리액트의 루트, 즉 뿌리로 만들어주는 역할

document.getElementById(root)
인수로 전달하고 있는 요소
➡️ index.html 파일 안에 있는 root를 id로 갖는 요소를 불러오는 중

따라서 위 요소가 main.jsx에 인수로 전달되는 중
➡️ 리액트는 이 요소를 리액트의 루트로 변환중

그 다음 render라는 메서드를 호출해서 루트 아래에 무언가 렌더링할 것

<React.StrictMode> 는 잠시 무시

<App />
App 컴포넌트 렌더링
➡️ 즉, App 컴포넌트 렌더링

이 App 컴포넌트는 어디서 가져오나?
맨 상위에 import 중

App.jsx를 살펴보면
html 태그를 리턴 중

리액트에서는 함수가 html 태그를 리턴하고 있으면, 이 함수를 컴포넌트라고 함

App.jsx를 보면, App 컴포넌트가 리턴하고 있는 html 요소를 보면 이미지도 리턴하고, h1 태그를 통해 텍스트도 렌더링하고, 버튼도 렌더링하고 있음

따라서 App 컴포넌트가 리턴하고 있는 이 html 태그가 main.jsx로 불러와져서 render 메서드를 통해 렌더링되고 있음

main.jsx 파일은 index.html에서 <script> 태그로 불러와 실행

그래서 개발자 도구를 보면,

App.jsx에서 함수로 만든 컴포넌트의 요소들이 잘 렌더링되고 있음

다시 말해, 해당 리턴되는 요소들을 삭제하면 아무것도 렌더링되지 않을 것

정리

리액트 앱은 index.html에서 main.jsx라는 자바스크립트 파일을 실행하는데,
이 파일에서는 App.jsx파일에 저장되어 있는 App 함수가 리턴하는 html 요소를 화면에 렌더링 중