[🍎코딩애플 강의요약]코드 길어지면 import export 하면 됩니다 📦

오늘의 학습 목표 🎯

1. 상품목록을 컴포넌트로 만들기
2. 컴포넌트에 데이터바인딩하기
3. 반복적인 HTML에 map 반복문 사용하기

중요: JSX를 export하는 컴포넌트용 파일은 .js 말고 .jsx로 만들어야 Vite 환경에서 잘 작동합니다! ⚠️

상품 데이터 준비 📊

실제 서비스에서는 서버에서 받아올 데이터를 미리 준비해봅시다:

[
  {
    id: 0,
    title: "White and Black",
    content: "Born in France",
    price: 120000
  },
  {
    id: 1,
    title: "Red Knit", 
    content: "Born in Seoul",
    price: 110000
  },
  {
    id: 2,
    title: "Grey Yordan",
    content: "Born in the States", 
    price: 130000
  }
]

구조 분석:

• [array자료]에 상품정보 3개가 들어있음
• 각 상품정보는 {object자료} 형태
• 축약하면 [{}, {}, {}] 구조

export default / import 문법 📤📥

기본 사용법

data.js 파일:

let a = 10;
export default a;

App.jsx 파일:

import a from './data.js';
console.log(a); // 10 출력

사용법 요약

• export default 변수명; - 변수를 다른 파일로 내보내기
• import 작명 from './파일경로' - 내보낸 변수 가져오기

유의사항 ⚠️

• 변수, 함수, 자료형 전부 export 가능
• 파일마다 export default는 하나만 사용 가능
• 파일경로는 ./부터 시작 (현재 경로 의미)

export { } / import { } 문법 📤📥

여러 개 변수 내보내기

data.js 파일:

var name1 = 'Kim';
var name2 = 'Park';
export { name1, name2 };

App.jsx 파일:

import { name1, name2 } from './data.js';

특징

• 여러 개의 변수, 함수를 한 번에 내보낼 수 있음
• 자유작명 불가능 - export한 변수명 그대로 사용해야 함

상품 데이터를 별도 파일로 분리하기 📁

길고 복잡한 state 데이터를 다른 파일에 저장하고 import해와서 사용:

data.js:

let data = [
  {
    id: 0,
    title: "White and Black",
    content: "Born in France", 
    price: 120000
  },
  // ... 나머지 데이터
];

export default data;

App.jsx:

import data from './data.js';
import { useState } from 'react';

function App(){
  let [shoes] = useState(data);
  // ...
}

상품 데이터를 HTML에 데이터바인딩하기 🔗

import해온 상품 데이터를 실제 화면에 표시:

function App(){
  let [shoes] = useState(data);
  
  return (
    <div className="App">
      {/* 생략 */}
      <div className="container">
        <div className="row">
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%" />
            <h4>{shoes[0].title}</h4>
            <p>{shoes[0].price}</p>
          </div>
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%" />
            <h4>{shoes[1].title}</h4>
            <p>{shoes[1].price}</p>
          </div>
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%" />
            <h4>{shoes[2].title}</h4>
            <p>{shoes[2].price}</p>
          </div>
        </div>
      </div>
    </div>
  )
}

데이터 접근 방법:

• shoes[0].title - 첫 번째 상품의 제목
• shoes[0].price - 첫 번째 상품의 가격

---

보충 설명 💡

ES6 모듈 시스템 심화 🔍

1. Named Export vs Default Export

// Named Export (여러 개 가능)
export const function1 = () => {};
export const function2 = () => {};

// Default Export (파일당 하나만)
export default function MainFunction() {}

// 혼합 사용 가능
export const helper = () => {};
export default MainComponent;

2. Import 방식 조합

// Default + Named Import 혼합
import MainComponent, { helper, utils } from './module.js';

// 전체 Import
import * as MyModule from './module.js';

// 별칭 사용
import { longFunctionName as short } from './module.js';

파일 구조 최적화 📁

권장 폴더 구조:

src/
├── components/
│   ├── ProductCard.jsx
│   └── Navbar.jsx
├── data/
│   ├── products.js
│   └── constants.js
├── utils/
│   └── helpers.js
└── App.jsx

컴포넌트 분리 전략 🧩

1. ProductCard 컴포넌트 분리

// components/ProductCard.jsx
export default function ProductCard({ product, index }) {
  return (
    <div className="col-md-4">
      <img src={`https://codingapple1.github.io/shop/shoes${index + 1}.jpg`} width="80%" />
      <h4>{product.title}</h4>
      <p>{product.price.toLocaleString()}원</p>
    </div>
  );
}

2. map() 함수로 반복 렌더링

// App.jsx
import ProductCard from './components/ProductCard';

function App() {
  const [shoes] = useState(data);
  
  return (
    <div className="container">
      <div className="row">
        {shoes.map((product, index) => (
          <ProductCard 
            key={product.id} 
            product={product} 
            index={index}
          />
        ))}
      </div>
    </div>
  );
}

데이터 관리 패턴 📊

1. 타입 정의 (TypeScript 사용 시)

interface Product {
  id: number;
  title: string;
  content: string;
  price: number;
  image?: string;
  category?: string;
}

2. 데이터 검증 함수

// utils/validation.js
export const validateProduct = (product) => {
  const required = ['id', 'title', 'price'];
  return required.every(field => product[field] !== undefined);
};

3. 데이터 포맷팅 유틸리티

// utils/formatters.js
export const formatPrice = (price) => {
  return new Intl.NumberFormat('ko-KR', {
    style: 'currency',
    currency: 'KRW'
  }).format(price);
};

export const formatProductForDisplay = (product) => ({
  ...product,
  formattedPrice: formatPrice(product.price),
  shortTitle: product.title.length > 20 
    ? product.title.substring(0, 20) + '...' 
    : product.title
});

성능 최적화 팁 ⚡

1. React.memo 사용

import React from 'react';

const ProductCard = React.memo(({ product, index }) => {
  return (
    // 컴포넌트 내용
  );
});

2. useMemo로 계산 결과 캐싱

import { useMemo } from 'react';

function ProductList({ products }) {
  const sortedProducts = useMemo(() => {
    return products.sort((a, b) => a.price - b.price);
  }, [products]);
  
  return (
    // 렌더링
  );
}