🚀 React 학습을 위한 2단계: React 기본 개념 학습 (JSX, 컴포넌트, Props, State, 이벤트 핸들링)

✅ 1️⃣ React의 핵심 개념 정리
✅ 2️⃣ React 기본 문법 및 예제 코드
✅ 3️⃣ React 실습 환경 세팅 및 연습 방법

---

1️⃣ React의 핵심 개념 정리

React를 배우려면 가장 중요한 5가지 핵심 개념을 이해해야 해!

🔹 1. JSX (JavaScript XML)

• JavaScript 코드에서 HTML 문법을 사용하도록 도와주는 문법
• HTML처럼 보이지만 JavaScript 코드임
• class 대신 className, camelCase 스타일 적용 필요

📌 예제 코드

const element = <h1>Hello, React!</h1>;
ReactDOM.render(element, document.getElementById("root"));

 

✅ JSX는 React에서 UI를 만들 때 필수적인 문법!

---

🔹 2. 컴포넌트(Component)

• React는 컴포넌트(Component) 기반 아키텍처
• 컴포넌트는 재사용 가능한 UI 조각
• 함수형 컴포넌트와 클래스형 컴포넌트가 있음

📌 함수형 컴포넌트 예제

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Welcome;

✅ React에서 function을 이용한 함수형 컴포넌트가 가장 많이 사용됨!

---

 

🔹 3. Props (Property)

• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법
• 읽기 전용(immutable) → 변경 불가능
• 여러 개의 속성을 넘길 수 있음

📌 예제 코드

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

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

✅ Props는 컴포넌트 간 데이터를 전달할 때 사용됨!

---

🔹 4. State (상태)

• React에서 컴포넌트의 동적인 데이터를 관리하는 변수
• useState를 사용하여 변경 가능

📌 예제 코드 (useState 활용)

import { useState } from "react";

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

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

export default Counter;

✅ State가 변경되면 React는 해당 컴포넌트를 자동으로 리렌더링!

---

🔹 5. 이벤트 핸들링

• React에서는 DOM 이벤트를 처리할 때 camelCase 문법을 사용
• onClick, onChange, onSubmit 등의 이벤트 사용

📌 예제 코드 (onClick 이벤트)

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

  return <button onClick={handleClick}>클릭</button>;
}

export default ButtonClick;

✅ 이벤트 핸들링은 UI와 사용자 상호작용을 처리하는 필수 개념!

---

2️⃣ React 기본 문법 및 예제 코드

🔹 React 프로젝트 생성

React를 사용하려면 먼저 프로젝트를 생성해야 해.

📌 터미널에서 실행

npx create-react-app my-react-app
cd my-react-app
npm start

✅ http://localhost:3000에서 React 앱 실행됨!

---

🔹 JSX에서 변수 사용하기

📌 예제 코드

const name = "React";
const element = <h1>Welcome to {name}!</h1>;

✅ JSX 안에서 {}를 사용하면 JavaScript 변수를 포함할 수 있음!

---

🔹 여러 개의 컴포넌트 조합

📌 예제 코드

function Header() {
  return <h1>My React App</h1>;
}

function Content() {
  return <p>This is my first React project!</p>;
}

function App() {
  return (
    <div>
      <Header />
      <Content />
    </div>
  );
}

✅ 여러 개의 컴포넌트를 조합하여 UI를 구성할 수 있음!

---

🔹 Props로 데이터 전달

📌 예제 코드

function UserCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
    </div>
  );
}

function App() {
  return <UserCard name="Alice" age={25} />;
}

✅ 부모 → 자식 컴포넌트로 데이터를 전달할 때 Props를 활용!

---

🔹 State를 활용한 동적인 UI

📌 예제 코드

import { useState } from "react";

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? "켜짐" : "꺼짐"}
    </button>
  );
}

export default Toggle;

✅ useState를 사용하여 버튼의 상태를 변경 가능!

---

3️⃣ React 실습 환경 세팅 및 연습 방법

🔹 React 실습 환경

✅ VS Code 다운로드: https://code.visualstudio.com/
✅ React 프로젝트 생성 (npx create-react-app my-app)
✅ CodeSandbox (브라우저에서 React 실습 가능): https://codesandbox.io/

---

🔹 무료 React 학습 자료

📌 React 공식 문서: https://react.dev/
📌 Nomad Coders React 강의 (무료): https://nomadcoders.co/react-for-beginners
📌 MDN Web Docs - React 기초: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
📌 유튜브 추천 강의

• 드림코딩 by 엘리 - React 기초부터 고급까지!
• 조코딩 - 실전 React 프로젝트 만들기1

---

🎯 마무리: React 기본 개념 정리

✅ JSX → JavaScript에서 HTML을 쉽게 작성하는 문법
✅ 컴포넌트 → UI를 재사용 가능한 단위로 나누어 관리
✅ Props → 부모에서 자식 컴포넌트로 데이터 전달
✅ State → 컴포넌트 내부에서 관리하는 동적인 값
✅ 이벤트 핸들링 → 사용자 상호작용 처리

🔥 이제 React의 핵심 개념을 익혔다면, 다음 단계에서 상태 관리와 라우팅을 배워보자! 🚀