jin's Blog

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과 유사한 문법을 사용할..

데이터 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가 나올 것이다. 결론적으로 위 함수에서 순차적으..

흔히 map 돌릴때 key가 사용되는데react에서는 key가 되게 유용하다. key가 값을 식별해서 고정시켜준다? 한 마디로 약간 ID 같은 느낌이다.예를 들어서 const [counterChanges, setCounterChanges] = useState([ { value: initialCount, id: Math.random() * 1000, }, ]); useState 초기값을 이런식으로 만들어서 value와 id를 부여해주고아래와 같이 받아서 그 값을 사용할 때 {history.map((count) => ( ))}  key로 고유 id를 지정해놓으면 새로운 값이 추가되더라도 기존의 값을 계속해서 지목한다.근데 이 방법이 되게 유..

이 전의 다뤘던 Memo의 기능처럼 리 랜더링을 방지하기 위해 memo를 쓰지만더욱 중요한 건 컴포넌트를 적절하게 나누는 것이다. 컴포넌트를 나누는 것이 React의 궁극적 이유이기도 하고결론적으로 컴포넌트를 잘게 나눠서 구분하여 관리하는 것이 효율적이다.  + useMemo 기능: 이 기능과 그냥 memo를 혼동하면 안된다. memo는 컴포넌트를 감싸고 useMemo는 함수를 감싼다.예를들어서 복잡한 계산이 있는 함수의 경우, 계속해서 랜더링 되게 하고 싶지 않을때 useMemo를 사용하고똑같이 dependeny 를 설정하여 불필요한 랜더링을 방지한다. 다만 useMemo 또한 사용하는 자체만으로 성능에 영향을 주기때문에 남발해서 사용하는 건 지양해야한다.  +++ Dom에 대한 이해 +++ React..

내가 React 개발자가 되기 위해 길을 잃지 않기 위해서 꼭 알아야 하는 기본 지식들을 써보자. 1. React의 기본 개념 및 필수 지식 React 개발자로서 기본적인 이해를 갖춰야 할 것들입니다: • JSX: HTML과 JavaScript가 혼합된 문법을 이해하고 작성할 수 있어야 합니다. • 컴포넌트: • 함수형 컴포넌트와 클래스형 컴포넌트 차이 이해 • 컴포넌트 재사용성과 컴포넌트 라이프사이클 관리 • Props와 State: • Props를 통한 데이터 전달과 컴포넌트 간의 데이터 흐름 • State를 통해 동적인 UI를 관리 • React Hooks: • useState, useEffect는 반드시 이해하고 활용할 수 있어야 합니다. • 추가로 useContext, useReducer, us..

react의 memo 기능. 이 전에도 반복해서 공부했듯이state의 값이 변할 때마다 전체를 랜더링 한다. 예시 사이트로 카운트 사이트가 있을 때플러스 버튼을 누르면 숫자가 올라간다고 하면숫자가 올라갈 때마다 저장된 state의 값이 변경되기 때문에계속해서 리랜더링이 되는 건데 이런 경우memo 기능이 도움을 준다. memo의 기능을 살펴봤을 때 아래처럼 memo로 감싸서 사용할 수 있는데 const Counter = memo(function Counter({ initialCount }) { log(' rendered', 1); const initialCountIsPrime = isPrime(initialCount); const [counter, setCounter] = useState(initi..

React.StrictMode로 앱 개발을 해야 하는 이유... 우리가 build한 React 앱은 두 번 세 번 백 번 작동하더라도 에러 없이 똑같이 작동되어야 한다.그래서 개발할 때 스트릭모드를 아래와 같이 설정해 놓고 개발을 하면자동으로 두 번 실행을 시켜서 콘솔로그에 두번의 결과가 뜨는 것을 확인할 수 있고이 덕분에 에러를 쉽게 발견할 수 있다.import React from 'react'import ReactDOM from 'react-dom/client'import App from './App.jsx'import './index.css'ReactDOM.createRoot(document.getElementById('root')).render( ,) 위 StrictMode를 통해서 ..