[React] Jsx, State, Props, Data fetching, Routing 설명 / 예

 

1. JSX

JSX는 JavaScript XML의 줄임말이야. HTML과 비슷하게 생겼지만 JavaScript 코드 안에서 사용되는 특별한 문법이야.
React 컴포넌트에서 UI를 그리는 데 사용돼!

예시:

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

 

위 코드는 HTML처럼 보이지만 실제로는 JavaScript야. JSX 덕분에 UI를 선언적으로 작성할 수 있어. 그리고 컴파일되면 JavaScript 코드로 변환돼!

 

 

2. State

State는 컴포넌트의 "내부 데이터"를 말해. 컴포넌트가 가지고 있는 데이터를 관리하고, 그 데이터가 바뀌면 UI가 자동으로 업데이트돼.

예시:

import React, { useState } from 'react';

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

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

 

여기서 count는 state야. 버튼을 클릭하면 setCount로 state를 업데이트하고, UI가 새로 그려져!

 

3. Props

Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용해. 일종의 "외부 데이터"라고 생각하면 돼.

예시:

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

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

 

여기서 name="근영"이 props야. 부모 컴포넌트(App)에서 자식 컴포넌트(Greeting)로 데이터를 넘긴 거지.

 

4. Data Fetching

React 앱에서 서버에서 데이터를 가져오는 걸 "데이터 패칭"이라고 해. 주로 useEffect와 fetch를 같이 써.

예시:

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

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

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

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

 

위 코드는 API에서 사용자 데이터를 가져와서 화면에 리스트로 표시하는 예제야. useEffect는 컴포넌트가 처음 렌더링될 때 실행돼.

---

5. Routing

Routing은 사용자가 어떤 URL로 이동했을 때 어떤 컴포넌트를 보여줄지 결정하는 거야. React에서는 react-router-dom 라이브러리를 자주 사용해.

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function Home() {
  return <h1>홈 페이지</h1>;
}

function About() {
  return <h1>소개 페이지</h1>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">홈</Link>
        <Link to="/about">소개</Link>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

 

위 코드는 간단한 라우팅 예제야. /에 접속하면 "홈 페이지"가, /about에 접속하면 "소개 페이지"가 보여!

 

---

 

한눈에 정리:

• JSX: HTML과 비슷한 문법으로 UI를 작성.
• State: 컴포넌트 내부 데이터, 동적으로 변경 가능.
• Props: 부모가 자식에게 전달하는 데이터.
• Data Fetching: API 등에서 데이터를 가져오는 작업.
• Routing: URL에 따라 컴포넌트를 전환.