taystory

🤖 챗지피티 대화 링크: https://chatgpt.com/share/67793230-000c-8008-92d5-3de24cfdbab11. React 컴포넌트의 생명주기와 useEffect의 역할React 컴포넌트는 마운트(mount), 업데이트(update), **언마운트(unmount)**의 생명주기를 갖습니다.React의 핵심 철학은 "순수한 컴포넌트는 입력(props)과 출력(UI)이 예측 가능해야 한다"는 것입니다.하지만 부수효과(예: API 호출, 타이머 설정, 이벤트 리스너 등록)는 상태 변화와 무관하게 실행되어 예측 불가능한 결과를 초래할 수 있습니다.이를 관리하기 위해 React는 useEffect 훅을 제공합니다.useEffect는 React가 렌더링과 부수효과를 명확히 분리하도록 ..

좋은 질문이야! addItem 함수를 useCallback으로 메모이제이션하지 않은 이유를 이해하려면, useCallback이 언제 필요한지와 그 사용 목적을 먼저 살펴봐야 해. 상황에 따라 useCallback이 필요한 경우와 그렇지 않은 경우가 다르기 때문이야. useCallback의 역할함수를 메모이제이션해서 매번 새로운 함수 참조를 생성하지 않도록 한다.함수가 자주 생성되면 불필요한 리렌더링을 유발할 수 있는 하위 컴포넌트를 보호한다.함수가 의존성(dependencies)을 갖고 있을 때, 변경되지 않는 값에 대해 동일한 함수를 재사용한다.  왜 addItem에 useCallback을 쓰지 않았을까?1. 상황에 따라 useCallback이 불필요만약 addItem을 사용하는 컴포넌트가 리렌더링에 ..

좋은 질문이야! React.memo()는 컴포넌트를 메모이제이션하는 데 사용되며, 특정 상황에서 성능 최적화에 유용해. 그런데, 특히 Product처럼 Prop을 필요한 값만 쪼개서 전달하는 컴포넌트에서 굳이 메모이제이션을 추가로 사용해야 하는 이유를 이해하려면 몇 가지를 고려해야 해.  React.memo()의 동작 원리React.memo()는 고차 컴포넌트(Higher Order Component, HOC)로, 같은 Prop이 전달될 때 이전 렌더링 결과를 재사용해 불필요한 리렌더링을 방지해.내부적으로는 **얕은 비교(shallow comparison)**를 통해 이전 Prop과 새로운 Prop을 비교해서 렌더링 여부를 결정해. React.memo()가 유용한 이유1. 불필요한 리렌더링 방지부모 컴포..

import { useCallback, useMemo, useState } from "react";import Product from "./Product";import Shipping from "./Shipping";import Product2 from "./Product2";function App() { // 🖍️Product2 문제해결🖍️ // product prop에 해당하는 data 값을 리턴해주는 함수를 만들고, 이 함수의 리턴값을 메모이제이션하는 useMemo()를 사용하면, 매번 캐시된 값을 반환하여 수량이 변경되어도 불필요하게 리렌더링 되지 않는다! // useMemo: 함수를 인자로 전달하고, 전달된 함수의 실행 결과(리턴값)를 memoize 함 // 헷갈리지말자, useMem..

1️⃣ useMemo()의 역할useMemo()는 값을 메모이제이션하기 위해 사용되는 React Hook입니다. 이로 인해 비용이 많이 드는 계산을 불필요하게 반복하지 않도록 최적화할 수 있습니다.이 코드에서 useMemo()의 사용 목적은 아래와 같습니다:컴포넌트 리렌더링 방지App 컴포넌트는 name 또는 num 상태값이 변경될 때마다 리렌더링됩니다.하지만 name이 변경되더라도, num이 바뀌지 않았다면 isPrime(num)을 다시 실행할 필요가 없습니다.👉 useMemo()를 사용하면, num이 변경되지 않은 경우 기존에 계산했던 결과를 재사용하게 됩니다.비용이 큰 연산의 재사용isPrime() 함수는 주어진 숫자가 소수인지 확인하는 함수로, 숫자가 클수록 계산 비용이 커집니다.useMemo(..

옵셔널 체이닝 (Optional Chaining)?.는 객체에서 **존재하지 않을 수 있는 속성**에 안전하게 접근할 때 사용됩니다.undefined나 null을 만나면 에러를 발생시키지 않고, 대신 undefined를 반환합니다. useSearchParams쿼리 스트링(URI에 포함된 ? 뒷부분) 정보를 읽거나 설정하는 데 사용// list?page=2 요청시const [searchParams, setSearchParams] = useSearchParams();const page = Number(searchParams.get('page') || 1);// 다음 페이지로 이동searchParams.set('page', page+1);setSearchParams(searchParams); paginatio..

1. 세션 스토리지 방식 (Session Storage 방식)세션 스토리지는 서버가 클라이언트 상태를 관리하는 전통적인 방법입니다.작동 원리클라이언트가 서버에 로그인 요청을 보냄.서버는 사용자를 인증한 후, 고유한 세션 ID를 생성.서버는 생성된 세션 ID와 함께 클라이언트의 로그인 상태를 서버의 메모리 또는 데이터베이스에 저장.예: 세션 ID와 사용자 정보를 매핑.클라이언트는 세션 ID를 쿠키에 저장하고, 이후 요청마다 이 세션 ID를 함께 전송.서버는 요청이 올 때마다 쿠키에 담긴 세션 ID를 확인하고, 서버에 저장된 세션 정보를 참고하여 요청을 처리.특징서버가 클라이언트 상태를 직접 관리하기 때문에 **상태를 유지(stateful)**할 수 있음.세션 데이터는 서버 메모리 또는 데이터베이스에 저장되..

useMemo지정한 함수를 호출하여 반환받은 결과값을 내부에 저장(캐싱)하는 함수APIconst calculateValue = function(){ ... };const cachedValue = useMemo(calculateValue, dependencies);매개변수calculateValue: 캐싱할 값을 계산하여 반환하는 순수 함수dependencies: 의존 객체 배열계산 결과에 영향을 주는 calculateValue 함수의 인자값이 배열의 값이 하나라도 변경되면 calculateValue 함수를 다시 호출하고, 변경되지 않으면 캐시된 값을 반환빈 배열을 지정하면 의존성이 없으므로 매번 캐시된 값을 반환리턴값calculateValue 함수를 호출한 결과값다음 렌더링 중에는 dependencies가..

import { useRef, useState } from "react";const errorStyle = { fontSize: "12px", color: "red", fontWeight: "bold",};const emailExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;const cellphoneExp = /^(01[016789]{1})[0-9]{3,4}[0-9]{4}$/;function App() { // ❌이런 식으로 상태 하나하나씩 useState()를 사용해서 하지 않을 것!(코드 너무 길어진다)❌ // const [name, setName] = useState(""); // const [email, setEmail] = useS..