React 무료로 배울 수 있나요?

네, 코드마스터의 React 강의는 전부 무료입니다. 광고도 없습니다. 개념노트는 로그인 없이 열람할 수 있습니다.

React 초보자도 따라갈 수 있나요?

네. 모든 레슨이 개념 설명 → 코드 예시 → 인터랙티브 데모 → 확인 퀴즈 순서로 구성되어 있어 사전 지식 없이도 따라올 수 있습니다.

React 학습에 얼마나 걸리나요?

각 레슨은 평균 30~60분 분량입니다. 하루 1~2개 기준 약 1~2개월이면 카테고리 전체를 완주할 수 있습니다.

JavaScript

리스트와 Key

💡 왜 배워야 할까요?

🎯 배열 데이터를 화면에 표시하는 가장 기본적인 방법입니다.

💼 Key를 잘못 쓰면 버그가 생기므로 반드시 배워야 합니다.

⚡ 상품 목록, 댓글, 검색 결과 등 모든 리스트에 필요합니다.

🏢 실무에서는

실무에서는 데이터베이스에서 받은 상품 배열을 map()으로 상품 카드 목록으로 변환합니다. Key를 제대로 설정하지 않으면 아이템을 삭제할 때 잘못된 항목이 사라지는 버그가 발생합니다.

리스트와 key — map으로 배열을 UI로 변환

실생활 비유: 학생 명단

선생님이 학생 명단 배열을 보고 출석카드를 하나씩 만드는 것처럼,
React는 배열을 map()으로 컴포넌트 목록으로 변환합니다.

기본 패턴

jsx

const fruits = ["사과", "바나나", "포도"];
return (
  <ul>
    {fruits.map((fruit, index) => (
      <li key={index}>{fruit}</li>
    ))}
  </ul>
);

key가 왜 필요한가?

React가 리스트에서 어떤 항목이 추가/삭제/변경됐는지 알 수 있도록

각 요소에 고유한 식별자를 붙입니다.

key 권장 우선순위

1. key={item.id} — 서버에서 온 고유 ID (최선)

2. key={item.slug} — 고유한 문자열

3. key={index} — 인덱스 (목록이 변하지 않을 때만)

key를 쓰지 않으면?

▸성능 저하 (전체 리스트 재렌더링)
▸콘솔에 경고 발생
▸애니메이션/상태 오작동 가능

💻 상품 목록 렌더링 + key 올바른 사용법

// ===== 입력: 상품 데이터 배열 =====
const products = [
  { id: 1, name: "노트북", price: 1200000, inStock: true },
  { id: 2, name: "마우스", price: 45000, inStock: true },
  { id: 3, name: "키보드", price: 89000, inStock: false },
];

// ===== 처리: map으로 배열 → 컴포넌트 변환 =====
function ProductList() {
  return (
    <ul>
      {products.map(product => (
        // key는 반드시 고유한 값, id가 있으면 id 사용
        <ProductItem key={product.id} product={product} />
      ))}
    </ul>
  );
}

// ===== 개별 상품 컴포넌트 =====
function ProductItem({ product }) {
  const { name, price, inStock } = product;  // 구조분해할당

  // 출력: 상품 카드 UI
  return (
    <li style={{ opacity: inStock ? 1 : 0.5 }}>
      <strong>{name}</strong>
      <span>{price.toLocaleString()}원</span>
      {/* 조건부 렌더링: 재고 상태 표시 */}
      {inStock ? (
        <span style={{ color: "green" }}>재고 있음</span>
      ) : (
        <span style={{ color: "red" }}>품절</span>
      )}
    </li>
  );
}

💡 💡 Key 팁

▸DB ID: 가장 이상적인 Key
▸인덱스 Key: 정렬/삭제 없는 정적 리스트에서만
▸crypto.randomUUID(): 클라이언트에서 ID 생성
▸성능: Key가 올바르면 React가 최소한의 DOM만 업데이트

이 개념은 React 컴포넌트 개발에서 핵심적입니다. 리액트의 선언적 UI 패러다임을 이해하고, props와 state의 차이를 명확히 구분하세요. 컴포넌트는 입력(props)에 대해 항상 동일한 출력(JSX)을 반환하는 순수 함수처럼 동작해야 합니다.

⚛️ React 패턴 — 리스트와 Key

리스트와 Key을 React에서 어떻게 쓰는지 코드와 함께 단계별로 익혀보세요.

1 🧩 1. 리스트와 Key 사용 시나리오

이 기능이 필요한 상황.

↓

2 💻 2. 코드 작성

리스트와 Key의 기본 사용법.

↓

3 🎨 3. 렌더링 결과

사용자가 보는 화면.

↓

4 💡 4. 실무 팁

흔한 함정과 베스트 프랙티스.

📋 리스트 렌더링 + 추가/삭제

코드를 직접 수정하면 0.7초 후 자동 반영됩니다. React 18 + Babel로 브라우저에서 즉시 실행.

🖥️ 실행 결과 — 렌더링된 React 컴포넌트

✏️ React 코드 수정하기 (클릭해서 열기)

function App() {
  const [items, setItems] = React.useState(['🍎 사과', '🍌 바나나', '🍇 포도']);
  const [input, setInput] = React.useState('');

const add = () => {
    if (!input.trim()) return;
    setItems([...items, input]);
    setInput('');
  };

const remove = (i) => setItems(items.filter((_, idx) => idx !== i));

return (
    <div style={{padding:20}}>
      <h2>🛒 장바구니</h2>
      <div style={{display:'flex', gap:8, marginBottom:16}}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && add()}
          placeholder="항목 추가"
          style={{flex:1}}
        />
        <button onClick={add}>+ 추가</button>
      </div>
      <ul style={{listStyle:'none', padding:0}}>
        {items.map((item, i) => (
          <li key={i} style={{
            padding:10, marginBottom:6, background:'#1e293b', borderRadius:6,
            display:'flex', justifyContent:'space-between', alignItems:'center'
          }}>
            <span>{item}</span>
            <button onClick={() => remove(i)} style={{background:'#ef4444'}}>X</button>
          </li>
        ))}
      </ul>
      <p style={{opacity:0.6, fontSize:12}}>총 {items.length}개</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

⚛️ React 18 + Babel Standalone — 결과 먼저 확인 후 코드 편집기에서 직접 수정해볼 수 있습니다.

확인 퀴즈

리스트 렌더링에서 key prop을 사용하지 않으면?