[Day49] React 설정(vite) & JSX & props

🔸 Vite 기반 React 설치

React 프로젝트 생성

# Vite + React 템플릿으로 생성
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

# 또는 아래처럼 직접 템플릿 선택
npm create vite

제시된 순서대로 셋팅한 모습

주의! 폴더명 작성하지 않아도 될 경우 ( . )

npm install

npm i 후 node_modules, package-lock.json 생성됨

React 앱 실행

npm run dev

• localhost:5173에서 앱 확인 가능
• vite.config.js에서 포트 변경 가능

---

Vite를 사용하는 이유

1. 빠른 개발 서버
   • Vite는 번들링 없이 네이티브 ES 모듈을 활용하여 매우 빠른 개발 서버를 제공합니다. 기존의 webpack 기반 도구(create-react-app)보다 훨씬 빠르게 시작됩니다.
2. 빠른 핫 모듈 교체(HMR)
   • 코드를 변경할 때 페이지가 거의 즉시 업데이트되어 개발 경험이 크게 향상됩니다.
3. 최적화된 빌드 : 프로덕션 빌드 시 Rollup을 사용하여 최적화된 결과물을 생성합니다.
4. 간소화된 설정
   • 기본 설정이 잘 되어 있어 추가 구성 없이도 바로 사용할 수 있습니다.
5. TypeScript 및 JSX 기본 지원
   • 별도의 설정 없이 TypeScript와 JSX를 즉시 사용할 수 있습니다.
6. 다양한 프레임워크 템플릿
   • React 외에도 Vue, Preact, Lit 등 다양한 프레임워크 템플릿을 지원합니다.
7. 가벼운 의존성 : create-react-app에 비해 의존성이 적어 설치 크기가 작습니다.
8. 최신 웹 표준 활용 : ES 모듈을 기반으로 하여 최신 웹 표준을 적극 활용합니다.

---

📁 Vite Scaffolding 구조

폴더/파일	설명
node_modules	의존성 모음
public	정적 파일 폴더
src	개발 소스 코드 폴더
└ assets	이미지, 폰트 등 정적 자산
index.html	진입 HTML 파일
main.jsx	React 앱 진입점
App.jsx / App.css	주요 컴포넌트 및 스타일
index.css	전역 스타일
package.json	프로젝트 설정 및 스크립트
eslint.config.js	최신 플랫 ESLint 구성
vite.config.js	Vite 빌드 설정
.gitignore / README.md	버전 관리 및 문서

---

ESLint + Prettier 설정

1. ESLint 설정 (플랫 구성: eslint.config.js)

코드 품질과 일관성을 유지하기 위한 중요한 설정 파일

import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import prettier from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';

export default [
  { ignores: ['dist'] },
  prettierConfig, // ESLint와 Prettier 충돌 방지
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      prettier: prettier, // Prettier 플러그인 추가
    },
    rules: {
      ...js.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      'prettier/prettier': 'error', // Prettier 규칙 위반 시 에러 표시
      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
    },
  },
];

📌 플랫 구성 방식: React 19 이상에서는 .eslintrc 대신 eslint.config.js를 사용하는 것이 권장됨.

---

2. Prettier 설정 (.prettierrc)

Prettier는 코드의 스타일과 포맷을 일관되게 유지하는 데 중점

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

3. eslint-plugin-prettier와 관련된 다른 필요한 패키지들을 설치

통합 플러그인이 충돌 없이 사용 가능하게 해줌

npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier

4. VS Code Workspace 설정 (.vscode/settings.json)

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "package.json": ".gitignore, .prettierrc, eslint.config.js, package-lock.json, vite.config.js"
  }
}

위 코드에서 이 부분은

"explorer.fileNesting.enabled": true,
"explorer.fileNesting.patterns": {
  "package.json": ".gitignore, .prettierignore, .prettierrc, eslint.config.js, package-lock.json, vite.config.js"
}

• setting.json에서 폴더 구조로 묶어서 만들어줘 ~ 라는 뜻의 코드
• package.json을 기준으로 관련 설정 파일들을 하나로 묶어서 보여줌

package.json이 폴더 구조로 바뀐 모습

5. Prettier 무시 파일 (.prettierignore)

node_modules
dist
build
.vscode

6. package.json 스크립트 추가

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "lint": "eslint . --config eslint.config.js --fix",
  "format": "prettier --write \"src/**/*.{js,jsx,css,json}\"",
  "preview": "vite preview"
}

✅ 설정 확인

npm run lint     # ESLint 확인
npm run format   # Prettier 포맷팅 확인
npm run dev      # 프로젝트 실행

---

🔸 실습

컴포넌트 구조 분리

App
 ├── Header
 ├── InputFiled
 └── PostList
       └── List

CSS 기준 설정 (전역 변수)

• :root에 변수 선언하여 테마 색상 및 공통 속성을 관리
• 유지보수 용이하고, 일관된 디자인 구현 가능

:root {
  font-family: 'S-CoreDream-3Light';
  --blue-dark: #1e6f9f;
  --blue: #4ea8de;
  --purple-dark: #5e60ce;
  --purple: #8284fa;
  --gray-700: #0d0d0d;
  --gray-600: #1a1a1a;
  --gray-500: #262626;
  --gray-400: #333333;
  --gray-300: #808080;
  --gray-200: #d9d9d9;
  --gray-100: #f2f2f2;
  --danger: #e25858;
  --gap1: 8px;
  --gap2: 16px;
  --gap3: 32px;
  line-height: 1.4;
  color: var(--gray-100);
}

사용 예시

body {
  background-color: var(--gray-600);
}

Props로 데이터 전달

• props를 통해 부모 컴포넌트의 데이터를 자식 컴포넌트에 전달
• 상위 컴포넌트에서 하위 컴포넌트로만 흐르며, 단방향 데이터 흐름을 유지한다.

구조 분해 할당

• 더 간결하고 직관적하게 props를 받을 수 있다.
• 컴포넌트 선언 시 괄호 안에서 props를 구조 분해하여 바로 사용.

기존 사용 방식

const PostList = (props) => {
  return <List area={props.data[0]} />
}

구조 분해 할당 방식

const PostList = ({ data }) => {
  return (
    <>
      {data.map((area, i) => (
        <List key={i} area={area} />
      ))}
    </>
  )
}

const List = ({ area }) => {
  return <p>{area}</p>
}

구조 분해 할당을 활용하면 코드의 가독성이 향상되고, props.area처럼 일일이 접근하지 않아도 되어 편리하다!

---

props 코드 흐름

App.js

부모 컴포넌트에서 데이터를 정의하고, 자식(PostList)에 전달

const list = ['송도', '인천', '서울', '부산', '대구', '대전', '광주']
const [data, setData] = useState(list)
<PostList data={data} />

PostList.js

props로 받은 data를 .map()으로 순회하며 List 컴포넌트에 전달

{data.map((area, i) => (
  <List key={i} area={area} />
))}

List.js

전달받은 area를 출력

const List = ({ area }) => <p>{area}</p>

컴포넌트 분리 구조

실습 UI

✅ 리스트 렌더링 + 스타일링 + 아이콘 (삭제 버튼 등)

[github]React-vite 실습

---

🔸 JS 메모리 저장 방식

Javascript는 동적 타입 언어로, 변수의 타입은 프로그램이 실행되는 동안 결정되고 변경될 수 있다. 이 언어에서의 자료형으로는 기본적으로 원시 타입과 객체 타입의 두 가지 데이터 타입이 제공된다.

원시 타입 (Primitive Types)

• 원시 타입은 기본적인 데이터 타입
• 변경 불가능한 값(immutable values)을 의미

• 자바스크립트에서 원시 타입에는 여섯 가지가 있다.

  1. Number: 모든 종류의 숫자를 포함한다.
  2. String: 텍스트 데이터를 나타낸다.
  3. Boolean: 참(true) 또는 거짓(false) 값을 가진다.
  4. Undefined: 정의되지 않은 값이다.
  5. Null: 의도적으로 비어 있는 값을 나타낸다.
  6. Symbol: ES6에서 도입된 고유하고 변경 불가능한 데이터 타입이다.

객체 타입 (Object Types)

• 원시 타입을 제외한 모든 자료형이 객체 타입
• 객체 타입은 원시 타입과 달리 복잡한 데이터 구조를 표현할 수 있다.
• 객체는 프로퍼티(속성)의 집합으로, 각 프로퍼티는 키와 값으로 구성된다.
• 자바스크립트에서는 함수도 객체의 한 형태로 간주한다.

1. Object: 키(Key)와 값(Value)을 가진 프로퍼티의 컬렉션이다.
2. Array: 순서가 있는 값의 집합이다.
3. Function: 실행 가능한 코드 블록이다.
4. Date, RegExp 등의 내장 객체들도 있다.

원시 타입과 객체 타입의 차이

항목	원시 타입 (Primitive)	객체 타입(Object)
저장 방식	값 자체가 변수에 직접 저장됨	메모리에 객체가 저장되고 변수는 그 참조(주소)를 저장
불변성	불변(Immutable) – 값을 변경하면 새 값이 할당됨	가변(Mutable) – 객체의 속성은 변경 가능
비교 방식	값 비교 (===는 값이 같으면 true)	참조 비교 (===는 동일 객체일 때만 true)
메모리 관리	고정된 크기, 관리가 단순	크기가 가변적, 동적으로 관리
복사 방식	값 복사 (깊은 복사)	참조 복사 (얕은 복사)
저장 위치	Stack	Heap
성능 측면	더 빠름 (가볍고 스택에 저장됨)	더 느림 (힙 접근 + 참조 구조 때문)

💡 객체, 배열, 함수 등은 전부 참조 타입이며, 변수는 실제 값이 아닌 Heap 주소를 참조한다.

예제

// 원시 타입
let num1 = 100;
let num2 = num1;

num2 = 200;
console.log(num1); // 100. 원본 값이 변경되지 않음
console.log(num2); // 200

// 객체 타입
let obj1 = { value: 100 };
let obj2 = obj1;
obj2.value = 200;
console.log(obj1.value, obj2.value); // 200, 200. 참조된 객체자체가 변경됨. (같은 메모리 주소를 공유)

---

🔸 복습

✅ jsx와 js는 왜 구별해서 사용하는가?

파일 확장자 구분의 주요 이유

1. 명확한 의도 전달
   • .jsx: React 컴포넌트, UI 관련 요소 포함
   • .js: 일반 JavaScript 로직, 유틸 함수 등 담당
2. 도구 및 편집기 최적화
   • 편집기(VS Code 등)가 파일 유형에 맞는 문법 강조와 자동 완성 기능을 제공
   • JSX 스니펫과 React 자동완성 지원
3. 빌드 시스템 최적화
   • 웹팩이나 Babel 같은 빌드 도구가 파일 유형에 따라 다른 처리
   • JSX 파일만 React 변환 과정을 거치도록 설정할 수 있어 빌드 성능 향상
4. 코드베이스 구성의 명확성
   • 팀원 간 파일의 역할을 쉽게 이해
   • 대규모 프로젝트에서 파일의 목적을 쉽게 파악
5. 관심사의 분리 (Separation of Concerns)
   • UI 로직(JSX)과 비즈니스 로직(JS)을 분리하여 코드 유지보수성 향상
   • UI(JSX)와 로직(JS)를 분리해 단일 책임 원칙(SRP) 실현

React 에서는 두 확장자 모두 사용 가능하며, 기술적으로는 동일하게 작동한다.
이는 개발자와 팀의 코드 구성 선호도에 따른 컨벤션의 문제이지만, 명확한 구분은 대규모 프로젝트에서 특히 유용 !

---

✅ JSX 문법 요약

JSX: JavaScript + XML
HTML과 비슷한 문법으로 React UI 구성을 선언적으로 표현

1. 기본 구조 : HTML처럼 태그를 사용

const element = <h1>안녕하세요, React!</h1>;

2. JavaScript 표현식 사용

중괄호 {}를 사용하여 JavaScript 표현식을 넣을 수 있음

const name = '홍길동';
const element = <h1>안녕하세요, {name}님!</h1>;

3. 속성(Attributes) 지정 - camelCase

// className (class 대신)
const element = <div className="container">내용</div>;

// style 객체로 지정
const style = { color: 'blue', fontSize: '16px' };
const element = <p style={style}>스타일 적용 텍스트</p>;

4. 자식 요소 포함

const element = (
  <div>
    <h1>제목</h1>
    <p>내용 설명</p>
  </div>
);

5. 닫는 태그 필수

const input = <input type="text" />;
const img = <img src="image.jpg" alt="이미지" />;

6. 조건부 렌더링

// 삼항 연산자 사용
const element = <div>{isLoggedIn ? <UserGreeting /> : <GuestGreeting />}</div>;

// AND 연산자 사용 (조건이 참일 때만 렌더링)
const element = <div>{unreadMessages.length > 0 && <MessageAlert />}</div>;

7. 리스트 렌더링 - map 함수로 순회

const numbers = [1, 2, 3, 4, 5];
const listItems = (
  <ul>
    {numbers.map((number) => (
      <li key={number}>{number}</li>
    ))}
  </ul>
);

• key는 꼭 넣어야 함! (React의 diff 성능 향상)

8. Fragment 사용

// <React.Fragment> 사용
const element = (
  <React.Fragment>
    <h1>제목</h1>
    <p>내용</p>
  </React.Fragment>
);

// 축약형 사용
const element = (
  <>
    <h1>제목</h1>
    <p>내용</p>
  </>
);

9. 이벤트 핸들링 - camelCase

function handleClick() {
  alert('버튼이 클릭되었습니다!');
}

const button = <button onClick={handleClick}>클릭하세요</button>;

✅ javascript 표현식

1. 변수 참조

let name = '홍길동';
console.log(name); // 변수 name은 표현식

2. 산술 표현식

let sum = 10 + 5; // 10 + 5는 15라는 값을 만드는 표현식
let product = 4 * 3;

3. 문자열 표현식

let greeting = 'Hello ' + 'World'; // 문자열 연결
let name = `User: ${firstName}`; // 템플릿 리터럴

4. 논리 표현식

let isValid = age > 18 && hasPermission; // 논리 연산
let canAccess = isAdmin || isManager; // true/false 값 생성

5. 함수 호출

Math.random(); // 함수 호출 자체가 표현식
console.log('Hello'); // 표현식

6. 객체/배열 리터럴

const person = { name: '김철수', age: 30 }; // 객체 리터럴
const numbers = [1, 2, 3, 4]; // 배열 리터럴

7. 삼항 연산자

let status = age >= 18 ? '성인' : '미성년자';

8. 화살표 함수

const double = x => x * 2;

✅ JSX에서의 JavaScript 표현식

JSX에서는 중괄호 {}를 사용하여 JavaScript 표현식을 삽입할 수 있습니다:

const name = '홍길동';
const age = 25;
const isAdmin = true;

// JSX 내 표현식 사용 예시
const element = (
  <div>
    <h1>{name}의 프로필</h1>
    <p>나이: {age}세</p>
    <p>직업: {age >= 18 ? '개발자' : '학생'}</p>
    <p>{isAdmin && '관리자 권한이 있습니다'}</p>
    <p>1년 후 나이: {age + 1}세</p>
    <p>랜덤 ID: {Math.floor(Math.random() * 100)}</p>
  </div>
);

JSX 중괄호 안에는 모든 JavaScript 표현식을 넣을 수 있다. 단, if 문이나 for 루프와 같은 문장(statements)은 표현식이 아니므로 직접 넣을 수 없다.

✅ useState()

• React의 가장 기본적인 Hook
• 함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해줌

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

1. useState(0)은 초기값이 0인 상태를 생성
2. count는 현재 상태값을 저장
3. setCount는 count상태를 업데이트하는 함수입니다.

주요 특징

• 상태 변경 시 자동 리렌더링
• 이전 상태를 기반으로 업데이트 시 함수형 사용: setCount(prev => prev + 1)
• 객체 상태 관리 시 전체 객체를 복사하여 업데이트

const [user, setUser] = useState({ name: '홍길동', age: 30 });
setUser({ ...user, age: 31 }); // 기존 객체 속성을 유지하면서 age만 변경

---

📌 수업 질문 정리

1. 컴포넌트 작성 시 함수 선언식보다 함수 표현식을 선호하는 주된 이유가 호이스팅 방지인지 궁금

✅ 강사님 답변

함수 표현식을 선호하는 이유는

1. 코드 일관성: 다른 변수/상수처럼 const로 선언해 코드 스타일을 통일할 수 있음
2. 화살표 함수의 장점: 간결한 문법 + this가 상위 스코프를 따름
3. 모던 JS 패턴: 함수형 프로그래밍과 어울림
4. 호이스팅 방지: 선언 전에 사용하지 못하도록 막아 코드 흐름을 더 명확하게 유지할 수 있음

// 함수 선언식 - 호이스팅됨
function MyComponent() { /*...*/ }

// 함수 표현식 - 호이스팅되지 않음
const MyComponent = () => { /*...*/ };

---

2. React 리스트 렌더링 시 항목 추가/삭제가 있는 경우 key={index}를 쓰면 안 되는지? 다른 방법은?

✅ 강사님 답변

React에서 key={index}를 사용하는 것은 항목이 추가되거나 삭제될 때 문제를 일으킬 수 있다.

1. 비효율적인 리렌더링 - React는 키를 통해 어떤 요소가 변경되었는지 파악하는데, 인덱스가 바뀌면 변경되지 않은 컴포넌트까지 불필요하게 리렌더링됩니다.
2. 상태 관리 이슈 - 인덱스가 변경되면 컴포넌트 상태가 섞이거나 혼란을 일으킬 수 있습니다.
3. 성능 저하 - 불필요한 DOM 조작이 발생해 성능이 저하됩니다.

더 나은 방법

1. 고유한 ID 사용

const todoList = [
  { id: 'task-1', text: '운동하기' },
  { id: 'task-2', text: '쇼핑하기' }
];

return (
  <ul>
    {todoList.map(item => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
);

1. 데이터가 없다면 ID 생성하기

import { v4 as uuidv4 } from 'uuid';
const newItem = { id: uuidv4(), text: '새 항목' };

1. 항목 자체의 고유한 값 활용

<li key={user.email}>{user.name}</li>

인덱스를 key로 써도 괜찮은 경우

• 리스트가 정적이며 절대 변경되지 않을 때
• 항목의 순서가 바뀌지 않을 때
• 항목에 고유 ID가 없을 때

---

END