728x90
반응형

분류 전체보기 101

[React] Custom hook 사용법

커스텀 훅(Custom Hook)이란?리액트(React)에서 커스텀 훅(Custom Hook) 은 여러 컴포넌트에서 재사용할 수 있는 로직을 함수로 추출한 것입니다. 기본적인 훅(useState, useEffect 등)을 조합하여 특정 기능을 수행하는 커스텀 훅을 만들면, 코드의 재사용성을 높이고 가독성을 향상시킬 수 있습니다. 이번 글에서는 로컬 스토리지(localStorage)를 활용하여 다크 모드 상태를 저장하는 커스텀 훅을 만들어 보겠습니다.로컬 스토리지와 다크 모드웹사이트에서 다크 모드(Dark Mode) 를 구현할 때, 사용자의 설정을 유지하는 것이 중요합니다. 그렇지 않으면 페이지를 새로고침할 때마다 모드가 초기화되어 사용자 경험이 떨어질 수 있습니다. 이를 해결하기 위해 로컬 스토리지(lo..

개발/React 2025.02.20

[React] Context API 사용법

Context API에 대해 정리해 볼게요.React에서 상태를 관리할 때, 보통 props를 이용하여 부모에서 자식 컴포넌트로 데이터를 전달합니다. 하지만 컴포넌트의 깊이가 깊어질수록 props drilling(프로퍼티를 계속 전달하는 문제)이 발생합니다. 이를 해결하기 위해 Context API를 사용하면, 전역적으로 상태를 관리하고 필요한 곳에서 바로 가져올 수 있습니다.Context API 기본 개념Context API는 크게 3가지 요소로 구성됩니다.createContext() - Context 생성Provider - 데이터를 제공하는 역할Consumer 또는 useContext - 데이터를 사용하는 역할Context API 사용 방법1️⃣ Context 생성하기 (UserContext.js)i..

개발/React 2025.02.20

[React] useReducer 언제 써야 될까?

useReducer는 상태가 여러 개일 때, 복잡한 상태 변화 로직을 처리할 때 유용한 React Hook입니다. 주로 여러 개의 상태 값을 한 번에 관리해야 할 때 사용되며,상태 업데이트가 특정 규칙을 따르는 경우 유용하게 사용할 수 있습니다. 아래 예시는 useState와 useReducer를 각각 사용한 예제를 통해 그 차이를 비교해보겠습니다. 1. useState를 사용한 상태 관리useState는 간단한 상태를 관리할 때 유용하지만,상태가 많거나 여러 상태가 서로 연관되어 있을 경우 관리가 복잡해질 수 있습니다. 예를 들어, 데이터를 가져오는 과정에서 로딩 상태, 에러 상태,그리고 실제 데이터 상태를 관리할 때 useState를 사용하면 아래와 같은 코드가 됩니다. Post.jsximport R..

개발/React 2025.02.18

[React] Jest와 React 테스트 환경 설정

React에서 Jest로 테스트 환경을 구축하는 방법을 정리해볼게요 Jest & 필수 패키지 설치기본적인 Jest 설정을 위한 패키지yarn add --dev jest @types/jestyarn add --dev @testing-library/react @testing-library/jest-domyarn add --dev @babel/preset-env @babel/preset-reactyarn add --dev identity-obj-proxy이렇게 하면 Jest와 React 테스트 환경을 갖출 수 있어요1. 한 번에 설치하는 방법yarn add --dev @testing-library/react @testing-library/jest-dom jest jest-environment-jsdom @ba..

개발/React 2025.02.18

[React] Redux 미들웨어 사용법

Redux 미들웨어 사용법에 대해 정리해 보려구 해요미들웨어는 중간에서 확인하고 처리해주는 역할을 합니다.Redux에서 미들웨어는 어디에 쓰일까?Redux에서는 액션이 리듀서로 가기 전에 미들웨어가 중간에서 그걸 확인하고 처리할 수 있습니다. 예를 들면,📍 로그를 남긴다지금 어떤 액션이 발생했는지 기록하기📍 비동기 작업을 처리서버에서 데이터를 가져오고 기다리는 기능 추가📍 에러 감지문제가 있으면 경고를 띄우기 🎮 미들웨어를 직접 만들어보자!  const myMiddleware = store => next => action => { console.log("미들웨어가 액션을 받았어요:", action); return next(action); // 다음 단계로 액션을 넘겨줌}; 💡 위 코드에너 s..

개발/React 2025.02.12

[React] React Router를 활용한 페이지 라우팅

주소에 맞게 적절한 페이지를 로드하는 Routing에 대해 정리해 보겠습니다. https://reactrouter.com/home React Router Home | React Router reactrouter.com1. React Router 설치React 프로젝트에서 React Router를 사용하려면 react-router-dom 패키지를 설치해야 합니다.npm install react-router-dom2. 기본 설정 [main.jsx 또는 index.js]애플리케이션에서 React Router를 사용하려면, 최상위 컴포넌트에서 BrowserRouter를 감싸야 합니다.import { StrictMode } from 'react';import { createRoot } from 'react-dom..

개발/React 2025.02.11

[React] Redux 사용법

전역 상태 관리 라이브러리인 Redux에 대해 설명해 보려고 해요 Redux의 3가지 원칙1. 신뢰 가능한 단일 출처상태는 하나의 store에서만 관리됩니다. 상태를 여러 곳에 분산시키지 않고, 하나의 중앙 저장소에서 모든 상태를 관리합니다.2. 상태는 읽기 전용Redux에서 상태는 직접 수정할 수 없습니다.상태를 변경하려면 액션을 통해서만 가능하며, 리듀서가 그 변화를 처리합니다.3. 리듀서는 순수 함수주어진 입력값에 대해 예측 가능한 결과를 반환해야 합니다.https://redux.js.org/introduction/getting-started Getting Started: Resources to get started learning and using Redux" data-og-host="redux...

개발/React 2025.02.10

[React] Recoil 사용법

전역 상태 관리 라이브러리 중 하나인 Recoil에 대해 정리해 보려고 해요 http://recoiljs.org/ko/docs/introduction/getting-started Recoil 시작하기 | RecoilReact 애플리케이션 생성하기recoiljs.org1. 초기 설정import { StrictMode } from "react";import { createRoot } from "react-dom/client";import "./index.css";import App from "./App.jsx";import { RecoilRoot } from "recoil";createRoot(document.getElementById("root")).render( );  2...

개발/React 2025.02.10

[React] 함수형 컴포넌트 Lifecycle과 렌더링 과정

함수형 컴포넌트 Lifecycle 렌더링 과정에 대해 정리해 보려구 해요React의 useEffect 훅을 활용하여컴포넌트가 마운트(mount), 업데이트(update), 언마운트(unmount) 될 때 실행되는 코드를 정의할 수 있어요.  [콘솔 창] 1. 컴포넌트가 처음 렌더링 될 때 (Mounting)useEffect(() => {...}, [])는 의존성 배열이 빈 배열 ([]) 이므로,컴포넌트가 처음 마운트될 때 한 번만 실행됩니다.2. 상태 변경으로 컴포넌트가 업데이트될 때 (Update)컴포넌트의 상태(state)가 변경되면 리렌더링(Rerendering) 이 발생합니다. ✅ 리렌더링이란?상태(state) 또는 속성(props)이 변경되면 화면이 다시 그려지는 과정을 의미합니다. 상태(val..

개발/React 2025.02.10

[React] React, MySQL, node.js 연동 방법

안녕하세요, hr0513입니다! 🥰React, MySQL, node.js 연동 방법에 대해 소개해드리겠습니다 ✔️ 진행할 내용:MySQL 설치 및 실행데이터베이스 및 사용자 생성테이블 생성 및 데이터 추가Node.js에서 MySQL 연결React에서 MySQL 데이터 가져오기1. MySQL 설치 및 실행WindowsMySQL 공식 사이트에서 다운로드 및 설치MySQL Workbench 또는 명령 프롬프트에서 실행2. 데이터베이스 및 사용자 생성터미널에서 MySQL에 접속한 후, 데이터베이스와 사용자를 생성합니다.-- 1. 데이터베이스 생성CREATE DATABASE myappdb;-- 2. 새로운 사용자 생성CREATE USER 'appuser'@'localhost' IDENTIFIED BY 'mypa..

개발/React 2025.02.06
728x90
반응형