react 프로젝트 4 (organize history)

fetch대신 axios를 쓴 이유

Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, fetch보다 사용하기 더 편리하며 브라우저와 Node.js에서 모두 지원됩니다. 또한, Axios는 인터셉터를 사용하여 요청 및 응답을 가로챌 수 있으므로, 토큰을 포함한 인증 헤더를 간단하게 처리할 수 있습니다. 이러한 이유로 Axios가 많은 개발자들에게 선호되는 HTTP 라이브러리 중 하나라고 합니다.

 

이렇게 대전에 관련된 4개의 api를 하나의 데이터로 추출 할 수 있었습니다.

또한 데이터를 localstorge에 저장하여 데이터를 바로 사용 할 수 있게 설정 했습니다.

프로젝트에서 사용하는 훅과 문법 정리

Axios

Axios는 Promise 기반의 HTTP 클라이언트 라이브러리입니다. Axios를 사용하면 간단하게 HTTP 요청을 생성하고 응답을 처리할 수 있습니다.

. 

React 훅

React 훅은 함수 컴포넌트에서 상태 관리와 같은 작업을 수행하는 데 사용됩니다. 훅은 useState, useEffect, useContext, useReducer 등의 이름으로 불립니다. 이러한 훅을 사용하면 클래스 컴포넌트보다 코드가 간결해지고 보다 명확해집니다.

useState

useState는 가장 많이 사용되는 훅 중 하나입니다. 이 훅을 사용하면 함수 컴포넌트에서 상태를 관리할 수 있습니다. useState는 배열을 반환하며, 첫 번째 요소는 상태 값, 두 번째 요소는 상태를 업데이트하는 함수입니다.

이번 프로젝트에서 가장 많이 활용하였습니다.

useEffect

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록합니다. 예를 들어, API 요청을 수행하거나 브라우저 타이틀을 업데이트 할 수 있습니다.

특정 오류를 고치는데 주로 사용되었습니다.

React Router DOM

React Router DOM은 React를 사용하여 클라이언트 측 라우팅을 구현하는 데 사용되는 JavaScript 라이브러리입니다. 이를 통해 다양한 경로와 URL 매개변수를 사용하여 React 컴포넌트를 렌더링할 수 있습니다.

React Router DOM에서는 <BrowserRouter>와 <Route> 컴포넌트를 사용하여 라우팅을 구현합니다. <BrowserRouter>는 모든 라우팅 컴포넌트를 감싸는 라우터 컴포넌트입니다. <Route>는 경로와 컴포넌트를 매핑하는 라우팅 규칙을 정의합니다.

React Router DOM에서 <Link>, <Route>, <Switch> 등을 사용하여 라우팅을 구현할 수 있습니다. <Link>는 페이지 내에서 다른 경로로 이동할 수 있는 링크를 만듭니다.

 

Redux

Redux는 React 애플리케이션 상태를 관리하기 위한 JavaScript 라이브러리입니다. Redux를 사용하면 애플리케이션의 상태가 단일 객체 트리로 표현되므로, 상태를 업데이트하고 관리하는 것이 보다 명확해집니다.

useReducer

useReducer는 useState 대안으로 복잡한 상태 로직을 처리하는 데 사용됩니다. useReducer는 현재 상태와 액션을 사용하여 다음 상태를 반환하는 함수를 받습니다.

React 문법

JSX

 

JSX는 JavaScript XML의 약자입니다. React에서는 JSX를 사용하여 UI를 렌더링합니다. JSX는 XML과 유사한 구문을 사용하여 JavaScript 코드를 작성하는 것을 가능하게 합니다.

 

Component

 

React에서 컴포넌트는 UI를 렌더링하는 독립적인 단위입니다. 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트로 나뉩니다.

 

Props

 

Props는 컴포넌트에서 사용되는 매개변수입니다. Props를 사용하여 컴포넌트 간에 데이터를 전달할 수 있습니다.

 

Bootstrap Modal

Bootstrap에서 Modal 컴포넌트를 사용하였습니다.

 

Kakao map API

이 프로젝트에서는 Kakao Map API를 사용하여 대전시의 관광지, 음식점, 숙박시설, 쇼핑센터 등의 정보를 지도에 마커로 표시하였습니다.