[React] Axios

01AxiosAxios는 HTTP 클라이언트 라이브러리로, JavaScript에서 API 호출을 쉽게 할 수 있도록 도와주는 라이브러리입니다. Promise 기반으로 작동하며, 브라우저와 Node.js에서 모두 사용할 수 있습니다. 특히, React에서 자주 사용됩니다. 📌 Axios 설치//npm을 사용하는 경우npm install axios//yarn을 사용하는 경우yarn add axios02기본 사용법Axios는 GET, POST, PUT, DELETE와 같은 HTTP 메서드를 사용하여 API 요청을 보낼 수 있습니다.다음은 가장 기본적인 예시입니다.✅ GET 요청 예시서버에서 데이터를 가져오는 예시입니다.import axios from "axios";axios.get("https://jsonp..

• format_list_bulleted React.js
• · 2025. 2. 21.
• textsms

[React] Redux와 Redux Toolkit

01Redux 란Redux는 애플리케이션에서 여러 컴포넌트들이 공통으로 사용하는 데이터를 전역 상태라고 부르는데,이 상태를 효율적으로 관리하는 도구입니다. React 같은 라이브러리에서는 컴포넌트들이 서로 독립적으로 동작하는데,여러 컴포넌트들이 같은 데이터를 필요로 할 때 Redux를 사용해서 상태를 한 곳에서 관리할 수 있습니다. ✅ 필요한 모듈: redux와 react-redux 모듈을 사용합니다.  📌 왜 Redux를 배워야 할까? Redux는 많은 개발자들이 사용하는 인기 있는 라이브러리입니다.예를 들어, npm trends에서 Redux의 다운로드 수를 보면 얼마나 많은 사람들이 이 도구를 사용하고 있는지 알 수 있습니다. 📌 FLUX 패턴?FLUX 패턴은 상태를 효율적이고 예측 가능한 방식..

• format_list_bulleted React.js
• · 2025. 2. 18.
• textsms

[React] 최적화 전략 2탄 (lazy, Suspense와 코드 스플리팅, Debounce, Throttle)

01lazy와 Suspense1. lazy lazy는 컴포넌트를 필요할 때만 로딩하는 기능으로, 초기 로딩을 최적화할 수 있습니다.이는 대개 큰 애플리케이션에서 유용하게 쓰입니다. ✅ 사용법import React, { Suspense, lazy } from 'react';const MyComponent = lazy(() => import('./MyComponent'));function App() { return ( Hello, world! Loading...}> );}export default App;React.lazy는 동적으로 컴포넌트를 불러오는 함수입니다.import() 구문을 사용하여 컴포넌트를 동적으로 불러옵니다.2. Suspense ..

• format_list_bulleted React.js
• · 2025. 2. 17.
• textsms

[React] React 스타일링 (SCSS, Styled-Components, Tailwind CSS)

01SCSS (SASS의 최신 버전!)SCSS는 CSS의 확장방식으로, 더 편리하게 적용할 수 있고 강력한 기능을 제공합니다. 가능성 증가, 재용성 강화, 중차구조 가능, 반복문 및 단어를 사용하여 간단하게 작성할 수 있습니다. ✅  파일 확장자:. scss: .scss1. SCSS 설치 방법npm install sass그리고 확장자가. scss인 파일을 생성해서 사용하면 됩니다!예를 들어 App.scss 파일을 만들고 이렇게 작성할 수 있어요. 3. 기본 문법 1) 변수 사용하기한 번 설정한 변수는 여러 곳에서 재사용할 수 있어서 편합니다!$main-color: #FF6F3C;button { background-color: $main-color; color: white;}  2) 중첩(Nesting..

• format_list_bulleted React.js
• · 2025. 2. 17.
• textsms

[React] 웹 스토리지 (Web Storage)

React의 상태(state)는 기본적으로 자바스크립트 변수에 저장되기 때문에 페이지를 새로고침하거나 브라우저를 닫으면 초기화됩니다.하지만 웹 스토리지(Web Storage)를 활용하면 데이터를 브라우저에 저장하여 새 로고침해도 유지할 수 있습니다.데이터를 영구적으로 보관하려면 외부 데이터베이스를 사용해야 하지만,간단하게 데이터를 저장하고 관리하는 방법으로 웹 스토리지를 활용하는 것이 좋습니다.01웹 스토리지 란?웹 스토리지는 웹 브라우저에 기본적으로 내장된 데이터 저장소입니다.따로 라이브러리를 설치하지 않고, 자바스크립트 내장 함수만으로 쉽게 데이터를 저장하고 불러올 수 있습니다.주요특징으로는브라우저가 기본적으로 제공하는 데이터 저장소별도 설치 없이 자바스크립트 내장 함수로 접근 가능새 로고침해도 데이..

• format_list_bulleted React.js
• · 2025. 2. 16.
• textsms

[React] 페이지 라우팅 (Routing)

웹 개발을 하다 보면 페이지 이동이 필요할 때가 많습니다. React에서도 이런 페이지 이동을 구현할 수 있는데요, 이를 "라우팅(Routing)"이라고 합니다. 이번 글에서는 라우팅이 무엇인지, 그리고 React에서 어떻게 라우팅을 설정하는지 쉽게 설명해 드릴게요!01페이지 라우팅이란?라우팅은 사용자가 특정 URL(경로)로 이동하면, 해당하는 페이지를 화면에 보여주는 것을 의미합니다. 예를 들어, /home 경로를 입력하면 홈페이지가, /about 경로를 입력하면 소개 페이지가 보이는 식이죠.1. MPA (Multi Page Application) 방식전통적인 웹사이트는 MPA 방식으로 동작합니다. 즉, 서버가 여러 개의 HTML 파일을 미리 가지고 있으며, 사용자가 특정 페이지를 요청하면 서버가 해당..

• format_list_bulleted React.js
• · 2025. 2. 13.
• textsms

[React] 컨텍스트 (Context)

React에서 props만으로 데이터를 전달할 때 불편한 점이 많습니다.부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하려면,중간 단계에 있는 모든 컴포넌트가 불필요하게 props를 받아야 하는 문제가 발생합니다. 이 문제를 해결하기 위해 React는 Context API라는 기능을 제공합니다.이 글에서는 Context의 개념부터 사용법, 최적화 방법까지 하나씩 알아보겠습니다.01Context가 필요한 이유1. Props의 단점: Props DrillingReact에서 컴포넌트 간 데이터를 전달할 때 보통 props를 사용합니다.하지만 부모 → 자식 → 손자로 props를 계속 전달해야 하는 경우,중간 단계의 컴포넌트들이 불필요한 props를 받아야 하는 문제가 발생합니다.이러한 현상을 Props Dri..

• format_list_bulleted React.js
• · 2025. 2. 10.
• textsms

[React] 최적화 함수 1탄 (useMemo, React.memo, useCallback)

01최적화(Optimization)React는 상태(state)나 props가 변경될 때마다 컴포넌트를 다시 렌더링 합니다.이 과정이 반복되면 성능이 저하될 수 있기 때문에 최적화(Optimization)가 필요합니다. React에서 사용할 수 있는 최적화 기법에는 크게 3가지가 있습니다.불필요한 연산 방지 → useMemo불필요한 렌더링 방지 → React.memo불필요한 함수 재생성 방지 → useCallback이제 각각의 개념을 하나씩 살펴보겠습니다.02useMemo - 불필요한 연산 방지useMemo는 메모이제이션(Memoization) 기법을 활용하여 불필요한 연산을 방지하는 React 훅입니다. ✅ 메모이제이션(Memoization)이란?이전에 계산한 값을 저장해 두고, 필요할 때 다시 꺼내 ..

• format_list_bulleted React.js
• · 2025. 2. 10.
• textsms