React 최상위 컴포넌트(`App.js`) 개념 및 데이터 관리 키워드

React 최상위 컴포넌트(App.js) 개념 및 데이터 관리 키워드 정리

1️⃣ 최상위 컴포넌트란?

React에서 최상위 컴포넌트는 애플리케이션의 중심이 되는 컴포넌트로, 보통 App.js가 그 역할을 한다.

✅ 최상위 컴포넌트의 역할

1. 애플리케이션의 구조 정의
   • 여러 개의 하위 컴포넌트를 포함하고 조합하여 UI를 구성한다.
2. 상태(State) 및 데이터 관리
   • API에서 데이터를 가져오고 상태를 저장하여 자식 컴포넌트로 전달한다.
3. 라우팅(Routing) 관리
   • react-router-dom을 사용하여 페이지 이동을 담당한다.
4. 전역 상태 관리
   • Redux 또는 Context API를 통해 전역 데이터를 관리할 수 있다.
5. API 호출 및 데이터 처리
   • fetch() 또는 axios를 이용하여 백엔드 API에서 데이터를 가져온다.

---

2️⃣ 데이터를 다루는 주요 키워드

🔹 1. useState (상태 관리)

컴포넌트 내부에서 데이터를 저장하고 변경할 때 사용하는 React 훅(Hook)이다.

import { useState } from 'react';

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

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

✅ 핵심 개념

• useState(0) → 상태 초기값을 0으로 설정
• count → 현재 상태 값 저장
• setCount() → 상태를 변경하는 함수

---

🔹 2. useEffect (라이프사이클 관리 & API 호출)

컴포넌트가 처음 렌더링될 때 실행되거나, 특정 값이 변경될 때 실행되는 함수이다.

import { useState, useEffect } from 'react';

function App() {
    const [data, setData] = useState([]);

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

    return (
        <ul>
            {data.slice(0, 5).map((item) => (
                <li key={item.id}>{item.title}</li>
            ))}
        </ul>
    );
}
export default App;

✅ 핵심 개념

• useEffect(() => {...}, []) → 컴포넌트가 처음 렌더링될 때 실행 (빈 배열 [] 사용)
• fetch() → API에서 데이터를 가져와 setData()로 상태 변경

---

🔹 3. props (부모 → 자식 데이터 전달)

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다.

function ChildComponent({ message }) {
    return <h2>{message}</h2>;
}

function App() {
    return <ChildComponent message="안녕하세요, React!" />;
}
export default App;

✅ 핵심 개념

• 부모에서 <ChildComponent message="안녕하세요!" /> 형태로 값을 전달
• 자식에서 { message }를 사용하여 props 값을 출력

---

🔹 4. fetch() & axios (API 요청)

백엔드에서 데이터를 받아오기 위해 사용된다.

📌 fetch() 사용

useEffect(() => {
    fetch('/api/products')
        .then(res => res.json())
        .then(data => setProducts(data));
}, []);

📌 axios 사용 (더 직관적)

import axios from 'axios';

useEffect(() => {
    axios.get('/api/products').then(res => setProducts(res.data));
}, []);

✅ 핵심 개념

• API에서 데이터를 받아와 setProducts()로 상태 업데이트

---

🔹 5. react-router-dom (라우팅)

React에서 페이지 이동을 담당하는 라이브러리이다.

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
            </Routes>
        </Router>
    );
}
export default App;

---

🔹 최종 정리: App.js에서 데이터를 다루는 핵심 키워드

키워드	역할
useState	상태 저장 (데이터 보관)
useEffect	API 호출 및 라이프사이클 관리
props	부모 → 자식 데이터 전달
fetch()	API 요청 (기본 방식)
axios	API 요청 (더 직관적이고 사용하기 편리함)
react-router-dom	페이지 이동(라우팅) 관리