반응형 React15 [React] Props로 전달되는 문자열 줄바꿈 하기 React에서 모달 창을 띄우려고 하는데바텀모달로 만든게 반복되는게 많다보니 재사용하기 좋도록 컴포넌트로 만들고 문자열들을 props로 전달 받아서 그래서 어떤건 한줄이고 어떤건 두 줄로 나눠서 나올 수 있도록 하였다. 해당 코드는 css는 tailwind css로 작성됨 ✅ 하는 방법 {blocker.state === "blocked" ? ( blocker.reset()} onLater={() => blocker.proceed()} textHead="나중에 이어서 쓰시겠어요?" textcontent={`혹시 몰라, 지금까지 쓴 내용을 \n 임시 저장해두었어요.`} .. 2024. 9. 26. [React]페이지 이탈 시 확인 모달창 띄우기 참고한 블로그https://choisuhyeok.tistory.com/m/140 [React] React Router로 페이지 이동 시 폼 데이터 손실 방지하기: usePrompt와 beforeunload 활용법폼을 작성하는 페이지에서 다른 페이지로 이동하려는 시도 시, 이동 전에 현재 작성된 내용이 손실될 수 있다는 경고 메시지가 나타나는 UI는 많은 사용자들이 익히 본 경험이choisuhyeok.tistory.com ❌❌❌❌제대로 동작되지 않은 코드입니다 참고하지 말기❌❌❌❌내가 작성한 코드communitywrite import React, { useState, useRef, useEffect } from "react";import { CustomHeader, Button, Selectbox,.. 2024. 9. 13. [React]useCallback ✔️useCallback이란? useCallback은 함수를 메모이제이션합니다. 주어진 종속성 배열이 변경되지 않으면, 동일한 함수 인스턴스를 반환합니다. 이는 컴포넌트가 불필요하게 다시 렌더링되는 것을 방지하는 데 도움을 줍니다.언제 사용: 컴포넌트가 자주 다시 렌더링되면서 동일한 함수가 다시 생성되는 것을 피하고 싶을 때, 특히 자식 컴포넌트에 콜백 함수를 props로 전달할 때 사용합니다.usememo랑 너무 헷갈렸는데 둘 다 비슷하긴 하지만 usememo는 특정 결과값을 재사용하는 반면, usecallback은 특정 함수를 새로 만들지 않고 다시 재사용하는 것이다. 1. useCallback의 구조import React, { useState, useCallback } from 'react';fu.. 2024. 9. 3. [React] useMemo ✔️useMemo란?useMemo는 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅이다.useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.그래서 복잡한 계산이 있을때 사용을 하는 것이며 동일한 값을 반환하는 함수를 반복적으로 호출해야한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 것이다.너무 많이 남용해서 안되는 이유가 의존성 값 비교를 수행해야 하기 때문에 컴포넌트 함수가 재실행되어야 하는 함수가 .. 2024. 9. 3. 이전 1 2 3 4 다음 728x90 반응형
