jin's Blog

React useEffect에서 else 없이 클린업 처리하기useEffect를 사용할 때, 상태에 따라 작업을 처리하면서 **클린업(cleanup)**을 수행하는 것은 매우 중요하다. 특히, 아래 코드처럼 else를 사용하지 않고 클린업을 처리하는 방식은 React에서 권장되는 패턴이다.useEffect(() => { const modal = dialog.current; if (open) { modal.showModal(); // 상태가 true일 때 다이얼로그 열기 } return () => modal.close(); // 상태 변경 또는 언마운트 시 다이얼로그 닫기}, [open]);왜 else를 사용하지 않을까?React의 클린업 메커니즘과 호환useEffect는 상태 변경이나 컴포넌..

React의 useContext로 상태를 공유하는 효율적인 방법: Cart 예제React 개발을 하다 보면 컴포넌트 간에 데이터를 공유해야 하는 상황이 자주 발생한다. 특히, 쇼핑 카트와 같은 기능에서는 여러 컴포넌트에서 동일한 상태(예: 장바구니 아이템 목록, 총 금액)를 참조하거나 수정해야 할 때가 많다. 이런 상황에서 **useContext**는 간단하고 효율적인 해결책을 제공한다.1. useContext란 무엇인가?useContext는 React의 Context API를 활용하여 전역 상태를 쉽게 사용할 수 있도록 도와주는 Hook이다.주요 특징부모 컴포넌트에서 데이터를 자식 컴포넌트로 전달할 때 Props Drilling을 방지한다.전역 상태를 관리하는 Context를 생성하고, 하위 컴포넌트에..

유효성 검사의 방법에는 여러가지가 있다.대표적으로 키보드 입력시 바로 유효성 검사해주거나, Blur 상태시(인풋칸에서 나갔을때) 유효성을 검사해주거나Form 제출 시 유효성 검사를 해주는 방법 등등 나는 Form제출 시 유효성 검사해주는 방법을 선호하는데 앞의 두개의 단점은 유저가 아무것도 입력하지 않은 상태에서버튼 광클같은 거 하면 벨리데이션으로 인한 에러가 유저에게 뜨긴 뜨는데 실제 콘솔 확인해보면 빈 데이터 상태로전송이 된다. 그러므로 많은사람들이 주로 이용하는 Form 제출의 예시를 써본다.const [formIsValid, setFormIsValid] = useState(false); function handleSubmit(event) { event.preventDefault(); ..

React에서 Form 데이터를 다루는 방법: Login 예제와 다양한 방식Form 데이터를 가져와서 처리하는 작업은 React 개발에서 매우 자주 등장하는 패턴 중 하나이다. 대표적으로 로그인(Login) 폼의 경우 이메일과 비밀번호를 입력받아 데이터를 서버로 전송해야 한다. 이 글에서는 State 관리와 FormData API를 활용한 Form 데이터 처리 방법을 소개한다.1. State를 활용한 Form 데이터 처리가장 기본적인 방식은 State를 활용하여 Form 데이터를 관리하는 것이다. State를 사용하면 React의 양방향 바인딩을 통해 Input 값과 상태를 쉽게 동기화할 수 있다.코드 예시import { useState } from "react";export default functio..

React에서 Custom Hook을 활용한 데이터 Fetching과 최적화React 프로젝트를 진행하다 보면 데이터 Fetching과 관련된 코드를 여러 컴포넌트에서 반복적으로 작성하게 된다. 이런 반복을 줄이고 코드의 재사용성을 높이기 위해 Custom Hook을 활용할 수 있다. 이번 글에서는 데이터를 Fetching하기 위한 Custom Hook을 만들고 사용하는 과정을 정리해 보았다.1. 기존 데이터 Fetching 코드기존의 Fetching 로직은 아래와 같은 형태로 작성된다.const [availablePlaces, setAvailablePlaces] = useState([]); // 데이터 상태const [isLoading, setIsLoading] = useState(false); // ..

React에서 자주 쓰이는 용어 정리 (영어/한국어)React 개발 중 자주 등장하는 개념과 용어를 영어와 한국어로 정리했다. 각 용어의 의미와 함께 간단한 설명도 포함했다.1. React의 기본 개념 (React Basics)Component컴포넌트UI를 구성하는 독립적인 블록으로, React의 기본 단위.Props속성부모 컴포넌트가 자식 컴포넌트로 전달하는 데이터.State상태컴포넌트 내부에서 관리되는 데이터.Hook훅함수 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 함수.Virtual DOM가상 DOM실제 DOM 대신 사용되는 React의 내부 표현 방식으로, 렌더링 효율성을 높임.JSX (JavaScript XML)JSXJavaScript 코드 안에서 HTML과 유사한 문법을 사용할..

데이터 구조와 타입 상세 예시데이터 구조와 타입의 각 예시를 실제 데이터 형태와 함께 보여주고, 그에 해당하는 영어 표현을 추가로 정리해 보았다.제발 그만 까먹자..1. 객체 (Object)영어: Object형태: { key: value }설명: 키-값 쌍으로 이루어진 데이터 구조. 데이터를 명확히 정의하고 다룰 수 있다.예시:{ "name": "Jin", "age": 25, "isDeveloper": true} 2. 배열 (Array)영어: Array형태: [value1, value2, ...]설명: 순서가 있는 데이터의 리스트. 데이터에 접근할 때 인덱스(번호)를 사용한다.예시:["apple", "banana", "cherry"] 3. 리스트 (List)영어: List형태: (일반적으로 배열 형..

데이터 Fetching에서 발생할 수 있는 두 가지 주요 에러와 효과적인 관리법데이터를 Fetching할 때 주로 발생하는 에러는 두 가지로 나뉜다.요청 시도 자체가 실패한 경우:잘못된 URL, 네트워크 충돌 등으로 인해 요청이 이루어지지 않는 경우이다.백엔드에서 에러가 발생한 경우:요청은 정상적으로 전달되었지만, 서버 내부에서 문제가 발생하여 에러가 반환되는 경우이다.1. Fetching을 위한 기본 코드 구조React의 useEffect 안에서 데이터를 Fetching하는 기본적인 코드 구조는 아래와 같다:import React, { useEffect, useState } from 'react';function App() { const [availablePlaces, setAvailablePlace..

임시 데이터베이스 연결 및 HTTP 요청 기본 플로우 프로그래밍을 하면서 API를 연결하는 작업은 익숙할 수 있지만, 가끔은 “GPT의 도움 없이 혼자 할 수 있을까?“라는 생각이 들 때가 있다. 기본적인 원리를 이해하고 직접 작성하는 것이 중요하다고 생각하기에, 간단한 HTTP Fetching의 흐름을 정리해 본다. 1. Fetch API 기본 이해 JavaScript의 fetch 메서드는 HTTP 요청을 보내고 Promise를 반환하는 함수이다. 기본적인 코드 구조는 아래와 같다:fetch('http://example.com/api') .then((response) => { return response.json(); // JSON 형태로 변환 }) .then((data) => { co..

useState의 값을 조정하기 위해서는 const [a , setA] = useState() 구조에서setA를 터치해서 조정해야 하는데 예를 들어 아래와 같은 구조에서function handleSetA(n) {setA(n)} setA(n) 밑에 예를 들어 console.log(a)를 찍어보면예상한 값은 n이 나와야 하지만그렇지 않다. 이 함수는 그런 식으로 작동하지 않고그대로 이전 값인 초기값이 나올 것이다. 그래서 이 상황에서 최신화된 값을 가지고 처리하고 싶다면아래와 같은 방법으로 해야 한다. function handleSetA(n){setA(n)setA((prev) => prev + 1);} 만약 초기값이 0이고 n이 1이라면최종 결과로 a 에는 2가 나올 것이다. 결론적으로 위 함수에서 순차적으..