jin's Blog

데이터 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를 통해서 ..

퀴즈 미니 프로젝트를 만들면서React의 여러가지 기능들을 되돌아보는데, 한 가지 계속 반복해서 나오는 건 State 즉 useState에서여러가지의 useState를 만들어서 쓰는 것도 가능하지만 되도록이면하나의 useState에서 여러 데이터를 파생해서 쓰는 것이 React에서 유리하다. 예를들어,  const [userAnswer, setUserAnswers] = useState([]);이런 식으로 유저가 고른 정답들이 저장되는 useState를 만들었을때현재 몇 번 문제 인지, 몇 번 인덱스에 있는지 확인하기 위해서 const [index, setIndex] = useState(0); 이런식으로 만들 수 도 있지만미리 만들어둔 useAnswer에서 유저가 고른 정답 목록의 길이를 가져오면 인덱스를..

그 동안 React 하면서 놓쳤던 중요한 것들을 다시보자!각 함수들 사이에 Props 주고받기 button 관리 ex) handleClicker('components')}>Components 기본적으로 Button 컴포넌트에서 children으로 가운데 "Components"를 받을 수 있고export default function TabButton({ children, onSelected }) { return ( {children} );} -> children은 기본 옵션으로 {children}으로 값을 가져올 수 있음-> onClick 옵션으로 클릭 이벤트를 받아서 onSelected 함수 실행시켜서 보내주고 useState로 해당 버튼 관리하기.c..