💻 JS & React 복습 정리
🧠 JS 복습
🧩 조건문 - 단축 평가 (Short-circuit Evaluation)
&&: 조건이 참일 때 결과 반환, 거짓이면false||: 조건이 거짓일 때 결과 반환, 참이면true
console.log(point >= 90 && "A학점"); // 참이면 "A학점", 아니면 false
console.log(point >= 90 || "A학점"); // 참이면 true, 아니면 "A학점"🔁 반복문 - map & filter
| 반복문 | 설명 |
|---|---|
| map() | forEach와 유사하지만, 반환값을 생성할 수 있음 |
| filter() | 조건에 맞는 요소만 걸러 반환 |
🌟 스프레드 연산자 (...)
| 용도 | 설명 |
|---|---|
| 배열/객체 복사 | 기존 값은 복사하지만, 새로운 주소값으로 생성 |
| 활용 예시 | const newArray = [...oldArray]; |
💡 React의
useState에서 상태 갱신 시, 스프레드 연산자를 사용하여 주소값을 변경해야 리렌더링이 발생합니다.
🧱 구조 분해 할당 (Object Destructuring)
- 객체에서 속성명(Key) 과 동일한 이름으로 변수 선언 필요.
const user = { name: "유재석", age: 40 };
const { name, age } = user;
console.log(name, age); // 유재석, 40📦 비구조화 할당 (Array Destructuring)
- 인덱스 순서대로 값을 분해하고 스프레드 연산자로 나머지를 저장.
const [ num1, num2, ...intArray ] = [ 1, 2, 3, 4 ];
console.log(num1); // 1
console.log(num2); // 2
console.log(intArray); // [3, 4]⚛️ React
React는 Meta(구 Facebook) 가 개발한 UI 라이브러리로, 페이지 전환 없이 빠른 화면 갱신을 목표로 합니다.
🧭 React의 목적
| 항목 | 설명 |
|---|---|
| UI 효율성 향상 | JavaScript만으로 구현하기 어려운 UI 조작 효율성 보완 |
| 유연한 UI 제공 | 웹과 앱 모두에서 자연스러운 UI 제공 |
| 트렌드 대응 | 빠르게 변화하는 프론트엔드 환경에 적응 |
⚙️ 주요 특징
| 항목 | 설명 |
|---|---|
| 컴포넌트 기반 | 화면을 함수 단위로 쪼개어 재사용 가능 |
| 가상 DOM | 실제 DOM 대신 Virtual DOM을 활용하여 성능 최적화 |
| Hooks | 함수형 프로그래밍 기반의 상태 관리 (useState, useEffect, 등) |
📱 사용처
| 구분 | 사용 기술 |
|---|---|
| 웹 개발 | React |
| 앱 개발 | React Native |
| 웹/앱 공용 | React Native Web |
🌐 SPA vs MPA
🧩 SPA (Single Page Application)
- HTML 하나로 구성된 구조, CSR(Client Side Rendering) 방식 사용
| 항목 | 내용 |
|------|------|
| 장점 | 빠른 전환 속도, 서버 부하 감소 |
| 단점 | 최초 로딩 속도 느림, SEO(검색엔진) 비효율적 |
| 보완책 |Next.js를 이용한 SSR(Server Side Rendering) |
| 예시 | React |
🧱 MPA (Multi Page Application)
- 여러 HTML 페이지로 구성된 SSR 방식
| 항목 | 내용 |
|------|------|
| 장점 | 필요한 데이터만 로드 가능 |
| 단점 | 페이지 전환 시 새로고침 발생 |
| 예시 | JSP |
🗂️ React 프로젝트 구조
| 폴더/파일 | 설명 |
|---|---|
| node_modules | 설치된 라이브러리 모음 (Git에 업로드 X) → npm install로 복구 가능 |
| public | 정적 자원 보관 (logo, favicon 등) |
| src | 주요 코드 파일 (컴포넌트, CSS 등) |
| ┣ 📁 components | 공통 컴포넌트 폴더 |
| ┣ 📁 pages | 페이지 폴더 |
| ┣ 📁 api | 비동기 통신 관련 코드 |
| App.jsx | 최상위 컴포넌트 |
| main.jsx | React 렌더링 진입점 |
| index.html | React가 최초로 적용되는 SPA 루트 파일 |
| package.json | 프로젝트 설정 및 의존성 관리 파일 |
⚙️ React 환경 설정
| 항목 | 설명 |
|---|---|
| Node.js | HTML과 독립적으로 JavaScript를 실행하는 런타임 환경 |
| npm | Node.js 기반 패키지 관리자 (Gradle과 유사 기능) |
🧾 React 설치 절차
1️⃣ Node.js 설치 (버전 v22.19.0 권장)
2️⃣ 버전 확인
node -v
npm -v3️⃣ React 설치 (Vite 기반 프로젝트 생성)
npm create vite@latest reactapp --template react4️⃣ 설치 후 실행 과정
cd reactapp
npm install
npm run dev
# 접속 주소: http://localhost:5173/🧯 Vite 설치 오류 해결
| 문제 | 원인/해결 |
|---|---|
| node -v 오류 | VSCode 재실행 |
| npm -v 오류 | PowerShell 관리자 권한 실행 후 권한 변경 명령어 실행 |
| 명령어 |
Get-ExecutionPolicy # Restricted 출력 시,
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned⚛️ React 기본 문법
| 항목 | 설명 |
|---|---|
| default export | 한 파일에서 1개만 내보내기 가능 (일반적으로 컴포넌트) |
| named export | 여러 개의 변수/함수 내보내기 가능 → 불러올 때 {} 사용 |
import hello, { PI, E } from './util.js';
console.log(hello('유재석'));
console.log(PI);
console.log(E);import/export를 사용하기 위해서는
type="module"필수!
🏗️ React 연결 구조 (main.jsx)
React는 index.html의 id="root" 요소에 최초 렌더링을 수행합니다.
// 1. react-dom 에서 createRoot 가져오기
import { createRoot } from 'react-dom/client'
// 2. index.html에서 root 요소 선택
const root = document.querySelector('#root');
// 3. root 요소를 React DOM에 연결
const create = createRoot(root);
// 4. 렌더링: App 컴포넌트를 root에 출력
import App from './App.jsx';
create.render(<App />);💡 App은
default export된 컴포넌트이므로 중괄호 없이 import합니다.
