📅 2025-10-01
➡️ React에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리 + 🤔❓
🔎 학습 리마인드
📌 React
💡 React란?
- 웹과 네이티브 UI를 위한 라이브러리
- UI를 만드는 데 특화된 자바스크립트 라이브러리
- 화면을 컴포넌트라는 작은 단위로 쪼개서 조립하듯 개발
- 웹은 물론, React Native 같은 생태계를 통해 모바일·데스크톱 등 다양한 UI로 확장 가능
💡 라이브러리와 프레임워크
라이브러리
- 공통 기능의 모듈화가 이루어진 프로그램의 집합
- 필요한 기능을 골라 붙이는 도구 묶음 → 앱 구조 흐름을 개발자가 주도
- React.js
- 화면(UI) 레이어에 집중
- 라우팅/상태관리/스타일링 등은 별도 도구를 선택해 조합
- 앱의 설계와 제어권이 개발자에게 있음
- react-router-dom
- redux
프레임워크
- 개발자가 기능 구현에만 집중할 수 있도록 필요한 프로그래밍적 재원을 지원하는 것
- 프로젝트의 뼈대 흐름까지 정해줌 → 정해진 규칙 안에서 개발
💡 특징과 이점
- SPA에 적합 : 전체 페이지 리로드 없이 필요한 부분만 갱신
- 컴포넌트화 : 재사용 테스트 협업에 유리
- 막강한 생태계 : 자료 플러그인 질문/답변이 풍부해서 학습/실무 진입장벽이 낮음
- 현업 채용 수요 높음
📌 SPA
💡 SPA란?
- Single Page Application: 문서(HTML)는 보통 하나 (
index.html) 이후 화면 전환은 JS가 데이터와 상태를 바꾸며 일부 영역만 업데이트
- 라우팅도 클라이언트가 담당 (URL 해시, History API ...)
💡 MPA/CSR/SSR
MPA (Muti-Page Application)
- 경로가 바뀔 때마다 새 HTML을 서버에서 받아서 전체 페이지를 다시 그림
CSR (Client-Side Rendering, 클라이언트 사이드 렌더링)
- 처음엔 빈 HTML만 내려주고, JS가 실행되면 화면을 그려줌
- 특징
- 최초 요청 시
<div id="root"></div>같은 빈 HTML + JS 파일 전달 - 브라우저가 JS를 실행해서 React 같은 프레임워크가 동적으로 화면을 구성
- 이후 페이지 이동은 서버에 HTML을 다시 요청하지 않고, JS가 일부만 갱신
- 최초 요청 시
- 장점
- 한 번 JS를 불러오면, 페이지 전환이 매우 빠름 (SPA 경험 제공)
- 서버 부하가 줄어듦 (데이터 API만 주고받음)
- 사용자 경험(UX) 좋음: 앱처럼 자연스러운 화면 전환
- 단점
- 첫 로딩 속도가 느림 (JS 파일을 다 받고 실행해야 첫 화면이 나옴)
- SEO에 불리 (검색 엔진이 JS 실행을 제대로 못 하면 빈 화면만 읽음 → 해결책: SSR이나 Static Site Generation과 혼합)
SSR(Server-Side Rendering)
- 초기 요청 시 서버가 완성된 HTML을 만들어 전달 → 초기 표시가 빠르고 SEO에 유리
- 특징
- 사용자가 페이지에 처음 접근하면 서버가 해당 경로에 맞는 HTML 완성본을 내려줌
- 이후 필요한 JS가 실행되면서 React 같은 프레임워크가 동작 시작(이 과정을 “Hydration”이라 부름)
- 장점
- 초기 로딩 속도가 빠름 → 첫 화면이 금방 보여짐
- 검색 엔진이 HTML 완성본을 바로 읽을 수 있어 SEO에 유리
- 단점
- 서버 부담이 커짐 (요청마다 HTML을 생성)
- 클라이언트 전환(페이지 이동) 시 CSR보다 느릴 수 있음
📌 Routing
💡 Routing
- SPA(Single Page Application)는 말 그대로 단 하나의 페이지에서 동작하는 웹 애플리케이션
- SPA에서 사용자가 “페이지를 이동”하는 것처럼 보이게 하는 방법 → 라우팅(Routing)
💡 해시 라우팅(Hashed Routing)
- 해시(
#)를 이용한 페이지 이동 SPA는 기본적으로 서버에 새로운 페이지를 요청하지 않음. 대신 주소창에#값을 붙여 구분http://localhost:3000/#homehttp://localhost:3000/#about
- 이처럼
#뒤의 값만 바뀌어도, 브라우저는 전체 페이지를 다시 요청하지 않고 클라이언트에서 화면을 전환 - hash값은 서버와 무관 브라우저 주소창에서 다음 비교
-
http://example.com/about→ 서버에 /about 경로 요청
-
http://example.com/#about→ 서버에는 /만 요청하고, #about 은 클라이언트 전용 값즉,
#이후의 값은 서버에 전달되지 않음. 오직 브라우저(클라이언트)에서만 사용
-
📌 리액트 프로젝트 생성 방법
💡 Vite
- 프론트엔드 개발을 위한 새로운 빌드 도구
🔗 Vite 공식 문서
- 사용자가 필요에 따라 설정을 쉽게 조정할 수 있음
- Vite로 리엑트 프로젝트 시작하기
yarn create vite [프로젝트 명]
💡 리액트 프로젝트 셋업 (by Vite)
# 리액트 Boilerplate 설치 : 프로젝트 셋업
yarn create vite
# 프로젝트 폴더로 이동
cd <프로젝트폴더명>/
# VS Code로 프로젝트 열기
code .- Boilerplate란?
- 프로젝트 시작을 빠르게 하기 위한 기본 파일 구조와 설정 묶음
- 새로운 프로젝트를 시작할 때 매번 똑같이 작성되어야 하는 파일 구조, 설정 초기 코드들이 있는데 이런것들을 자동으로 만들어 주는 기본 틀
📌 vite로 만들어진 React 프로젝트 구조
💡 index.html
SPA에는html파일이 한 개만 존재.- 리엑트 프로젝트 안에서도
index.html파일 한 개만 존재
💡 main.jsx
index.html파일에서main.jsx를 모듈로 불러서 사용main.jsx파일 역시App.jsx파일을 불러와서 사용
💡 App.jsx
💡 package.json
- 프로젝트 설명서
// package.json { "name": "goorm-react-1", // 프로젝트 이름 "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.13", "@types/react-dom": "^19.1.9", "@vitejs/plugin-react-swc": "^4.1.0", "eslint": "^9.36.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", "globals": "^16.4.0", "vite": "^7.1.7" } }
📌 컴포넌트
💡 React components
- 리액트에서 UI를 구성하는 가장 작은 단위
- 함수형 컴포넌트 권장
💡 컴포넌트 보는 방법
1. 컴포넌트 밖 (import / export 영역)
- 필요한 라이브러리나 다른 파일을 불러오기 → `import`
- 내가 만든 컴포넌트를 다른 곳에서 사용할 수 있도록 내보내기 → `export default`2. 컴포넌트 안 (자바스크립트 영역)
- 컴포넌트 함수 안에서는 일반적인 자바스크립트 코드를 작성할 수 있음
- 예: 변수 선언, 함수 작성, 데이터 가공 등3. return 아래 (JSX 영역)
- return문 안에서는 JSX 문법 사용
- JSX는 자바스크립트 안에서 HTML처럼 보이는 코드를 작성할 수 있게 해줌
- 여기 작성한 JSX가 실제로 화면에 렌더링 됨❗주의할 점
- 컴포넌트를 만들 때 첫 글자는 대문자 사용
- 폴더 → 소문자로 시작하는 카멜케이스
- 컴포넌트 → 대문자로 시작하는 카멜케이스
