React에서 데이터를 가져오는(fetch) 방법은 대표적으로 두 가지예요:
1️⃣ 기본 내장 fetch() API
2️⃣ 외부 라이브러리 axios

두 방법 모두 자주 쓰이고, 성격이 다르기 때문에 프로젝트 상황에 따라 선택합니다. 아래에 종류별 예제 + 설명을 정리했어요 👇

🌐 1. fetch() 기본 사용법

✅ 기본 문법 (GET 요청):

import { useEffect, useState } from "react";

export default function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts") // API 주소
      .then((res) => res.json())                       // 응답을 JSON으로 변환
      .then((data) => setPosts(data))                 // state에 저장
      .catch((err) => console.error("에러:", err));   // 에러 처리
  }, []);

  return (
    <div>
      <h2>📦 fetch 예제</h2>
      <ul>
        {posts.map((p) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
    </div>
  );
}

📌 설명:

• fetch()는 브라우저 내장 함수 → 별도 설치 필요 없음
• .then() 체인을 사용하거나 async/await도 가능
• 응답을 JSON으로 변환하려면 .json()을 꼭 호출해야 함
• 에러 처리가 try/catch 대신 .catch()에서 이뤄짐

✅ POST 요청 (데이터 전송):

async function addPost() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ title: "새 글", body: "내용", userId: 1 }),
  });

  const result = await response.json();
  console.log("✅ 저장 결과:", result);
}

📌 포인트:

• method 지정 필요
• headers로 JSON 전송 명시
• body는 반드시 문자열(JSON.stringify)

📡 2. axios 사용법

Axios는 Promise 기반 HTTP 클라이언트로, fetch보다 기능이 많고 문법이 간결합니다.

📦 설치:

npm install axios

✅ 기본 GET 요청:

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

export default function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((res) => setPosts(res.data))       // JSON 변환 불필요
      .catch((err) => console.error("에러:", err));
  }, []);

  return (
    <div>
      <h2>📦 axios 예제</h2>
      <ul>
        {posts.map((p) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
    </div>
  );
}

📌 fetch와 비교 포인트:

• res.json() 필요 없음 → res.data 바로 사용
• 자동으로 JSON 변환 처리
• 에러가 catch로 잘 전달됨
• 요청/응답 인터셉터, 기본 URL, 헤더 설정 등 고급 기능 많음

✅ POST 요청 (axios):

async function addPost() {
  try {
    const res = await axios.post("https://jsonplaceholder.typicode.com/posts", {
      title: "새 글",
      body: "내용",
      userId: 1,
    });
    console.log("✅ 저장 결과:", res.data);
  } catch (error) {
    console.error("에러 발생:", error);
  }
}

📊 fetch vs axios 비교표

🧭 HTTP 메서드별 개념 & 용도 정리

⚛️ useEffect란?

useEffect는 React 함수형 컴포넌트에서 부수효과(Side Effect) 를 처리하기 위한 훅(Hook)입니다.
예를 들어 다음과 같은 동작이 모두 “부수효과”에 해당해요 👇

• 📡 API 호출 (데이터 가져오기)
• ⏱️ 타이머/인터벌 설정
• 📦 로컬스토리지 접근
• 📍 DOM 직접 조작
• 🧹 구독 해제나 리소스 정리(cleanup)

즉, 렌더링만으로는 해결되지 않는 외부 동작을 처리할 때 useEffect를 사용합니다.

useEffect(() => {
  // 이 안에서 부수효과 실행
  return () => {
    // (선택) cleanup: 컴포넌트가 사라질 때 실행
  };
}, [dependency]);

• 첫 번째 인자: 실행할 함수
• return 부분: cleanup (선택 사항)
• 두 번째 인자 []: 의존성 배열 → 언제 실행할지 제어

📌 예제 1 – 컴포넌트가 처음 렌더링될 때 1회 실행

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

function Welcome() {
  const [message, setMessage] = useState("로딩 중...");

  useEffect(() => {
    // ✅ 마운트 시 한 번만 실행
    setTimeout(() => {
      setMessage("안녕하세요! 👋");
    }, 1500);
  }, []); // ← 의존성 배열이 빈 배열이면 '처음 한 번만'

  return <h2>{message}</h2>;
}

export default Welcome;

📍 동작

• 컴포넌트가 처음 렌더링될 때만 setTimeout() 실행
• 1.5초 후 메시지가 업데이트되고 화면이 다시 렌더링됨

📌 예제 2 – 상태 변화마다 실행

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

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

  useEffect(() => {
    console.log(`📢 카운트가 ${count}로 변경됨`);
  }, [count]); // count가 바뀔 때마다 실행됨

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

export default Counter;

📍 동작

• count 상태가 변경될 때마다 useEffect 안의 함수 실행
• 콘솔에 새로운 값 로그 출력

📌 예제 3 – 타이머 사용 + 정리(cleanup)

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

function Timer() {
  const [sec, setSec] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setSec(s => s + 1), 1000);
    console.log("⏱️ 타이머 시작");

    // ✅ cleanup: 컴포넌트가 사라질 때 실행
    return () => {
      clearInterval(id);
      console.log("🧹 타이머 정리 완료");
    };
  }, []); // 마운트 시 1회 실행

  return <h2>⏱️ {sec}초 경과</h2>;
}

export default Timer; 

📍 동작

• 컴포넌트가 처음 나타날 때 setInterval 시작
• 1초마다 sec 상태 증가 → UI 자동 갱신
• 컴포넌트가 사라질 때 clearInterval()로 메모리 누수 방지

✅ 정리

useState란?

useState는 React에서 컴포넌트의 상태(state)를 관리하기 위한 기본 훅(Hook)입니다.
함수형 컴포넌트에서 변수값을 기억하고 업데이트할 수 있게 해주며, 값이 바뀌면 자동으로 UI를 다시 렌더링합니다.

📌 문법:

const [state, setState] = useState(initialValue);

• state: 현재 상태 값
• setState: 상태를 변경하는 함수
• initialValue: 상태의 초기값

🧪 기본 예제 – 카운터 만들기

import React, { useState } from "react";

function Counter() {
  // count라는 상태를 0으로 초기화
  const [count, setCount] = useState(0);

  // +1 증가
  const increase = () => setCount(count + 1);
  // 초기화
  const reset = () => setCount(0);

  return (
    <div>
      <h2>현재 카운트: {count}</h2>
      <button onClick={increase}>+1</button>
      <button onClick={reset}>초기화</button>
    </div>
  );
}

export default Counter;

📍 실행 흐름:

• 처음 렌더링 시 count는 0
• 버튼 클릭 시 setCount()가 실행 → 상태 변경
• 상태가 바뀌면 자동으로 다시 렌더링되어 화면의 숫자도 갱신됨

🧪 예제 2 – 토글 상태 관리

import React, { useState } from "react";

function LoginToggle() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      <p>{isLoggedIn ? "✅ 로그인 상태" : "🔒 로그아웃 상태"}</p>
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? "로그아웃" : "로그인"}
      </button>
    </div>
  );
}

export default LoginToggle;

📍 실행 흐름:

• 초기 상태는 false → “로그아웃 상태” 표시
• 버튼 클릭 시 !isLoggedIn으로 상태가 반전 → UI도 자동 변경

✅ 정리

• useState는 함수형 컴포넌트에서 상태를 저장·업데이트하는 기본 훅
• 상태 변경 시 자동 렌더링 → DOM 조작 불필요
• 다양한 타입(숫자, 문자열, 배열, 객체 등) 저장 가능
• 이벤트·폼 입력·토글 UI 등에서 가장 자주 사용됨

⚛️ React의 7가지 핵심 특징 정리

1️⃣ 컴포넌트 기반 구조 (Component-Based Architecture)

React는 UI를 작고 독립적인 컴포넌트(Component) 단위로 쪼개어 개발합니다.
각각의 컴포넌트는 자신의 상태(state)와 UI를 관리하며, 조합하여 복잡한 화면을 쉽게 구성할 수 있습니다.
이 방식은 재사용성, 유지보수성, 협업 효율성을 모두 높여줍니다.

2️⃣ 가상 DOM (Virtual DOM)

React는 브라우저 DOM을 직접 조작하지 않고, 메모리에 가상의 DOM(Virtual DOM)을 만들어 변경 사항만 비교(diff)한 후
필요한 부분만 최소한으로 업데이트합니다.
이로 인해 불필요한 렌더링을 줄이고 성능이 대폭 향상됩니다.

3️⃣ 단방향 데이터 흐름 (One-Way Data Flow)

React는 부모 → 자식 방향으로만 데이터가 흐르는 단방향 데이터 플로우 구조를 가집니다.
데이터 흐름이 단순해 예측 가능성이 높고, 디버깅이 쉽습니다.

4️⃣ 선언적 UI (Declarative UI)

React는 명령형 방식으로 DOM을 직접 조작하지 않고, “무엇을 보여줄지”를 선언합니다.
상태(state)가 변경되면 React가 알아서 UI를 다시 렌더링해주므로 코드가 간결하고 유지보수가 쉽습니다.

5️⃣ Hooks를 통한 상태 관리 (Hooks & State)

useState, useEffect 같은 Hooks를 사용하면 함수형 컴포넌트에서도 상태 관리와 생명주기 제어가 가능합니다.
복잡한 상태는 Redux, Zustand, Recoil 등의 라이브러리와 연동하여 관리할 수 있습니다.

6️⃣ 풍부한 생태계 & 커뮤니티 (Rich Ecosystem & Community)

React는 라우팅(react-router), 상태 관리, UI 라이브러리(Material UI, Chakra UI) 등 다양한 생태계를 갖추고 있으며
전 세계적으로 커뮤니티가 활발하여 문제 해결 속도가 빠르고 자료가 풍부합니다.

7️⃣ 다양한 플랫폼 지원 (Cross-Platform Support)

React는 웹(React DOM)뿐 아니라 모바일(React Native), 데스크톱(Electron), SSR(Next.js) 등
다양한 플랫폼에서 활용할 수 있습니다.

📊 한눈에 보는 요약