React? JSX?

1. JSX 란?

JSX(JavaScript XML)는 JavaScript 안에서 HTML 같은 코드를 쓸 수 있게 해주는 문법이다.
React에서 UI를 만들 때 JSX를 많이 쓴다.

✅ JSX 예제

function Hello() {
  return <h1>Hello, World!</h1>;
}

 

 

 

❌ JavaScript에서 JSX 없이 React 코드 쓰기

JSX 없이 React를 사용하면 이렇게 써야 한다.

const element = React.createElement("h1", null, "Hello, World!");

 

비교해 보면 JSX가 훨씬 직관적이고 쓰기 쉽다.

JSX는 실제로는 JavaScript로 변환돼서 브라우저에서 실행된다.

---

3. React가 뭐야?

React는 UI를 쉽게 만들 수 있게 해주는 JavaScript 라이브러리.
페이스북(현재 메타)에서 만들었고, 컴포넌트 기반으로 UI를 구성할 수 있다.

✅ React의 특징

• 컴포넌트 기반: UI를 작은 조각(컴포넌트)으로 나눠서 재사용할 수 있음
• 가상 DOM: 변경된 부분만 빠르게 업데이트해서 성능 최적화
• 선언형 프로그래밍: UI의 상태를 쉽게 관리 가능

 

✅ React 코드 예제

1. 기본적인 React 컴포넌트

React의 기본 단위는 컴포넌트다.
컴포넌트는 UI의 한 조각을 의미하고, 함수형 컴포넌트로 만들 수 있다.

import React from "react";

function Hello() {
  return <h1>Hello, React!</h1>;
}

export default Hello;

👉 Hello 컴포넌트는 <h1> 태그를 반환하는 아주 간단한 컴포넌트다.

---

2. 프롭스(Props) 사용하기

컴포넌트는 프롭스(Props) 를 이용해서 동적인 값을 전달할 수 있다.

import React from "react";

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

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

👉 Greeting 컴포넌트는 props.name을 받아서 "Hello, Alice!"를 출력한다.

---

3. useState로 상태 관리하기

React에서는 useState를 사용하면 컴포넌트에서 상태(State) 를 관리할 수 있다.

import React, { useState } from "react";

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

👉 count라는 상태를 만들고, 버튼을 누를 때마다 count + 1이 된다.

---

4. useEffect로 사이드 이펙트 관리

useEffect를 사용하면 API 호출이나 DOM 업데이트 같은 사이드 이펙트를 처리할 수 있다.

 

import React, { useState, useEffect } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <h1>Seconds: {seconds}</h1>;
}

export default Timer;

👉 컴포넌트가 마운트되면 setInterval이 실행되고, 1초마다 seconds 값이 증가한다.

---

5. API 호출하기 (fetch 사용)

React에서 데이터를 가져오려면 useEffect와 fetch를 함께 사용할 수 있다.

import React, { useState, useEffect } from "react";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <div>
      <h1>Users List</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Users;

👉 API에서 사용자 목록을 가져와서 화면에 렌더링한다.

---

6. 컴포넌트끼리 데이터 주고받기 (부모 → 자식)

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 Props를 사용한다.

 

import React from "react";

function Child({ message }) {
  return <h1>{message}</h1>;
}

export default function Parent() {
  return <Child message="Hello from Parent!" />;
}

👉 Parent에서 Child에게 "Hello from Parent!" 값을 전달하고, Child가 그 값을 표시한다.

---

7. Context API로 전역 상태 관리

컴포넌트가 많아질수록 props 전달이 복잡해진다.
이럴 때는 Context API를 사용해서 전역적으로 값을 공유할 수 있다.

import React, { createContext, useContext, useState } from "react";

// 1. Context 생성
const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 2. 테마를 사용하는 컴포넌트
function ThemedComponent() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <div>
      <h1>Current Theme: {theme}</h1>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        Toggle Theme
      </button>
    </div>
  );
}

// 3. 앱에서 Context 적용
export default function App() {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
}

👉 ThemeProvider가 theme 값을 전역으로 관리하고, ThemedComponent에서 useContext로 접근할 수 있다.

---

🔥 결론

1. 기본적인 React 개념들

 

✅ 기본 React 컴포넌트
✅ 상태 관리 (useState),
✅ 사이드 이펙트 (useEffect),
✅ API 호출,
✅ Context API

2. React + JSX를 사용하면 깔끔하고 직관적인 UI 코드를 작성할 수 있다.