초급 개발자가 알아야 할 React 관련 개념

🎯 React 초급 개발자가 알아야 할 HTML, for, if, JavaScript 개념 총정리

🚀 React를 사용하려면 HTML, for, if, JavaScript를 어떻게 다루는지 반드시 알아야 해!
📌 React는 JSX(JavaScript + XML) 문법을 사용하기 때문에, 기본적인 개념을 React에서 어떻게 적용하는지 이해해야 함!

---

📌 1. HTML 관련 (JSX에서 변경되는 것들)

React에서는 JSX 문법을 사용하기 때문에 일반 HTML과 다르게 써야 하는 요소가 있음.

✅ (1) class → className

🚨 HTML에서 class를 사용할 수 없음!
💡 React에서는 className으로 써야 함.

// ❌ 잘못된 코드 (HTML 방식)
<div class="container">Hello</div>

// ✅ 올바른 코드 (React JSX 방식)
<div className="container">Hello</div>

---

✅ (2) for → htmlFor

🚨 <label>에서 for 속성을 사용할 수 없음!
💡 React에서는 htmlFor로 써야 함.

// ❌ 잘못된 코드 (HTML 방식)
<label for="input">이름:</label>

// ✅ 올바른 코드 (React JSX 방식)
<label htmlFor="input">이름:</label>

---

✅ (3) 닫는 태그가 필수!

React의 JSX에서는 모든 태그를 닫아야 함.

// ❌ 잘못된 코드 (HTML 방식)
<img src="logo.png">

// ✅ 올바른 코드 (React JSX 방식)
<img src="logo.png" />

📌 input, img, br 같은 태그도 반드시 <태그 />처럼 닫아야 함.

---

✅ (4) style 속성 사용법 (객체 형태)

🚨 HTML의 style을 React에서는 객체로 작성해야 함!

// ❌ 잘못된 코드 (HTML 방식)
<div style="color: red; font-size: 20px;">Hello</div>

// ✅ 올바른 코드 (React JSX 방식)
<div style={{ color: "red", fontSize: "20px" }}>Hello</div>

📌 style을 사용할 때 중괄호 {} 를 두 번 써야 함. ({{}})

---

📌 2. for 문 (반복문)

React에서는 for 문을 직접 사용할 수 없고, 대신 map()을 사용해야 함.

✅ (1) 일반적인 for 문 (React에서는 사용 X)

// ❌ React에서 직접 사용할 수 없음
for (let i = 0; i < items.length; i++) {
    console.log(items[i]);
}

🚨 JSX 안에서는 for을 직접 사용할 수 없음.

---

✅ (2) map()을 사용한 반복 렌더링

💡 React에서는 .map()을 사용하여 리스트를 렌더링함.

const items = ["사과", "바나나", "오렌지"];

function List() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>  // key 필수
      ))}
    </ul>
  );
}

📌 key={index}를 사용해야 React가 리스트를 효율적으로 관리할 수 있음.

---

📌 3. if 문 (조건문)

React에서는 JSX 안에서 if 문을 직접 사용할 수 없고, 삼항 연산자(? :), && 연산자, if 함수 사용을 권장함.

✅ (1) if 문을 JSX에서 직접 사용하면 안 됨

// ❌ React JSX 내부에서는 사용할 수 없음
if (isLoggedIn) {
    return <p>로그인되었습니다.</p>;
}

---

✅ (2) 삼항 연산자 (? :) 사용

💡 JSX 내부에서 조건문을 쓰려면 삼항 연산자를 사용해야 함.

const isLoggedIn = true;

function App() {
  return (
    <div>
      {isLoggedIn ? <p>로그인되었습니다.</p> : <p>로그인하세요.</p>}
    </div>
  );
}

📌 isLoggedIn이 true면 "로그인되었습니다.", false면 "로그인하세요."가 출력됨.

---

✅ (3) && 연산자 사용 (단일 조건)

💡 && 연산자는 조건이 참일 때만 렌더링하는 용도로 사용.

const isAdmin = true;

function AdminPanel() {
  return (
    <div>
      <h1>일반 사용자 페이지</h1>
      {isAdmin && <h2>관리자 기능 활성화됨</h2>} 
    </div>
  );
}

📌 isAdmin이 true일 때만 <h2>관리자 기능 활성화됨</h2>이 보임.

---

✅ (4) if 문을 함수로 따로 빼서 사용

💡 복잡한 조건 처리는 if 문을 함수로 만들고 JSX에서 호출.

function getMessage(isMorning) {
  if (isMorning) {
    return "좋은 아침입니다!";
  }
  return "안녕하세요!";
}

function App() {
  return <h1>{getMessage(true)}</h1>;
}

📌 getMessage(true)가 실행되어 "좋은 아침입니다!" 출력.

---

📌 4. JavaScript에서 React에서 자주 쓰는 개념

React에서 자주 쓰이는 JavaScript 개념을 정리하면:

✅ (1) useState로 상태 관리

💡 React에서 state(상태)를 관리할 때 useState를 사용.

import { useState } from "react";

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

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

📌 버튼 클릭 시 count 상태가 변경되고 자동으로 렌더링됨!

---

✅ (2) map()을 활용한 리스트 렌더링

const users = [{ id: 1, name: "철수" }, { id: 2, name: "영희" }];

function UserList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

📌 배열 데이터를 .map()으로 반복하여 렌더링!

---

✅ (3) props를 사용한 데이터 전달

function Greeting({ name }) {
  return <h1>안녕하세요, {name}님!</h1>;
}

function App() {
  return <Greeting name="철수" />;
}

📌 부모 → 자식으로 데이터(props) 전달하는 기본 개념!

---

🎯 최종 정리

✅ HTML → JSX 변경된 문법 (className, htmlFor, 닫는 태그 필수)
✅ 반복문 → map() 사용 (for 직접 사용 불가)
✅ 조건문 → 삼항 연산자(? :), &&, if 함수로 처리
✅ React에서 상태 관리 (useState), 리스트 렌더링 (map()), 데이터 전달 (props)

---

📌 추가로 알면 좋은 개념 (더 깊이 공부하고 싶다면)

1️⃣ 이벤트 핸들링 (onClick, onChange 등)

   function ButtonComponent() {
     const handleClick = () => alert("버튼 클릭됨!");
     return <button onClick={handleClick}>클릭</button>;
   }

→ onClick 같은 이벤트를 사용할 줄 알면 사용자 인터랙션을 쉽게 구현할 수 있어!

2️⃣ useEffect로 컴포넌트 생명주기 다루기

   import { useEffect } from "react";

   function Example() {
     useEffect(() => {
       console.log("컴포넌트가 마운트됨!");
     }, []);
     return <p>안녕하세요!</p>;
   }

→ React에서 렌더링 후 실행할 코드를 작성할 때 useEffect()를 사용해.

3️⃣ props.children을 활용한 컴포넌트 디자인

   function Card({ children }) {
     return <div className="card">{children}</div>;
   }

   function App() {
     return (
       <Card>
         <h1>안녕하세요!</h1>
         <p>이것은 카드 안에 들어가는 내용입니다.</p>
       </Card>
     );
   }

→ props.children을 사용하면 컴포넌트를 더 유연하게 만들 수 있음!

---

🎯 최종 결론

✔ 지금까지 배운 내용이면 React 초급 개발자로 충분한 기초를 갖춘 상태!
✔ 하지만 더 깊이 가려면 이벤트 핸들링, useEffect, props.children 같은 개념도 익혀두면 좋아!