React 기본 문법 학습하기

 

브라우저에서 HTTP 요청을 보내는 방법

 

항목	fetch	axios
내장 여부	브라우저/Node(18+) 내장	별도 설치 필요 (npm i axios)
에러 처리	네트워크 실패에서만 reject, HTTP 4xx/5xx는 resolve → res.ok 수동 검사 필요	HTTP 4xx/5xx에서 자동 reject
JSON 처리	await res.json() 직접 호출	response.data에 이미 파싱된 데이터
요청 본문	직접 JSON.stringify()	객체 주면 자동 JSON 직렬화(헤더 설정도 보통 자동)
타임아웃	내장 없음 → AbortController로 직접 구현	timeout 옵션 제공
취소	AbortController	signal(AbortController) 지원
기본 설정	없음(요청마다 지정)	axios.create({ baseURL, headers }) 등 전역/인스턴스 설정
인터셉터	직접 래핑해야 함	요청/응답 인터셉터 내장
진행률 이벤트	스트림 다룰 줄 알아야 함	onUploadProgress, onDownloadProgress (XHR 기반)
쿠키(크로스도메인)	credentials: 'include' 필요	withCredentials: true 필요

 

 

 

---

 

 

React 문법

 

import 구문

import { useState } from 'react';
import axios from 'axios'; 
import './App.css';

 

•  import 는 다른 파일이나 라이브러리에서 필요한 기능(함수, 변수 등)을 가져오는 문법
•  { useState } 는 React에서 상태 관리용 훅을 가져오는 것, react 라이브러리 중에서 useState만 가져올 것이므로 중괄호{}로 감싼다.
•  axios 는 HTTP 요청 라이브러리를 가져오는 것
•  './App.css' 는 같은 폴더 내 CSS 파일을 불러와서 스타일 적용

 

 

JSX에서 주석 작성

{/* 글 작성 버튼 */}

• 일반적인 자바스크립트 주석( // 또는 /* */)은 JSX 내부에서는 바로 쓸 수 없고, 중괄호 {} 안에 JS 주석을 넣어야 한다.

 

 

함수형 컴포넌트 정의

function App() { ... }
export default App;

•  App 은 리액트 컴포넌트 함수 이름이다.
•  export default 는 이 컴포넌트를 다른 곳에서 사용할 수 있게 내보내는 역할
• 내보내기 하지 않은 함수는 다른 .js 파일에서 사용 불가, 현재 파일에선 사용 가능

 

export default function App() {
  // 컴포넌트 코드
}

이렇게도 사용 가능하다.

 

 

 

스프레드

function numRecording() {
  setNumList([...numList, num]);
}

• 현재 num 을 목록 배열의 맨 뒤에 추가하는 함수이다.
•  [...] 는 스프레드 연산자로, 기존 배열을 복사해서 새 배열을 만드는 문법

 

 

이벤트 핸들러 함수

const handleInputChange = (e) => {
  setAnswer(e.target.value);
};

•  handleInputChange 는 입력창에서 글자를 입력할 때 실행되는 함수이다.
•  e 는 이벤트 객체,  e.target.value 는 입력된 값
• 입력값을  answer 상태로 저장

 

 

Axios

• Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 브라우저 및 Node.js 환경에서 모두 사용
• 백엔드와 통신하기 위해 AJAX 요청을 만들고 응답을 다루는 데에 사용된다.
• 다른 비동기 통신 API보다 사용하기 쉬워 백엔드 통신이 수월하다.
• 서버에서 받은 응답을 자동으로 JSON으로 파싱

const response = await axios.post('/user', { answer });

 

answer 값을 JSON 형태로  /user 에 POST 요청 보내고, 서버 응답을 받아  response 에 저장한다.

 

 

 

Axios를 사용해 서버로 데이터 보내기

const handleSubmit = async () => {
  try {
    const response = await axios.post('/user', { answer });
    setResponseMsg(response.data.msg);
    setIsSuccess(response.data.result);
  } catch (error) {
    console.error('Error:', error);
    setResponseMsg('서버 요청 실패');
    setIsSuccess(false);
  }
};

 

•  async  붙으면 비동기 함수(서버 응답을 기다림)
•  axios.post('/user', { answer }) 는  /user  주소로 answer를 포함한 JSON 요청 보냄
•  await 는 서버 응답을 기다림
• 성공하면 응답에서 메시지와 성공 여부를 상태로 저장
• 실패하면 에러 출력하고 실패 상태로 저장

 

 

상태 선언 (useState)

• React에서 컴포넌트 상태(state)를 관리하는 가장 기본적인 훅(Hook)이다.
• 컴포넌트가 변하는 값(예: 입력창 내용, 버튼 클릭 여부 등)을 기억하도록 도와주는 기능
• 상태가 바뀌면 컴포넌트가 자동으로 다시 렌더링되어 화면이 최신 상태로 업데이트된다.

 

기본 사용

import { useState } from 'react';

function MyComponent() {
  const [value, setValue] = useState(initialValue);

  // value: 현재 상태 값
  // setValue: 상태를 바꾸는 함수
  // initialValue: 초기 상태 값

  return (
    <div>
      <p>{value}</p>
      <button onClick={() => setValue('안녕하세요!')}>
        클릭해서 상태 변경
      </button>
    </div>
  );
}

초기 값(initialValue)은 ‘’이나 null, 0도 가능

 

 

 

버튼을 클릭할때마다 숫자가 1씩 증가하는 예제

import { useState } from 'react';

function MyComponent() {
  const [value, setValue] = useState(0);

  return (
    <div>
      <p>{value}</p>
      <button onClick={() => setValue(value + 1)}>
        숫자 증가
      </button>
    </div>
  );
}