반응형 전체 글171 [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. [React] 리액트 반응형 useMediaQuery 리액트 디바이스 자체의 화면 폭을 확인해서 true/ false를 반환해주는 useMediaQuery 리액트 전용 훅을 사용할 수 있다. 디바이스 폭 기준이라, 창을 늘리거나 줄여도 반응하지 않는다.그래서 모바일,태블릿, pc 같이 디바이스 자체를 가늠하려는 경우 사용하면 유용하게 쓸 수 있음 1. install 필요함 터미널창에서 react-responsive 설치npm install react-responsive 2. import 해주기 import { useMediaQuery } from "react-responsive"; 3. 변수 세팅 const isDesktop = useMediaQuery({ query: "(min-width: 1024px)" }); const isMobile =.. 2024. 8. 30. [React] useContext api useContext 훅은 어떻게 사용할까?리액트의 일반적인 데이터 흐름은 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 '단방향'으로 흐른다. 엄청 큰 컴포넌트 트리가 있다고 가정할 때 공통적으로 필요한 전역적인 데이터가 있을 수 있다. 예를 들어 userdata전역 데이터를 일일이 props로 단계별로 전달해야 한다면 정말 비효율 적이다.리액트는 이러한 문제점을 해결해 주는 Context API를 제공한다.Context는 앱 안에서 전역적으로 사용되는 데이터를 여러 컴포넌트끼리 쉽게 공유할 수 있는 방법을 제공한다. Context를 사용하면 Props로 데이터를 일일이 전달해 주지 않아도 해당 데이터를 가지고 있는 상 위 컴포넌트에 그 데이터가 필요한 하위 컴포넌트가 접근할 수 있다. 즉 사용자 .. 2024. 8. 27. [git] git merge 전 병합완료 취소하기 git pull 이후 conflict 난 부분 병합하고 서버 안돌리고 병합완료 버튼 눌렀더니만 해당 페이지만 오류가 났다ㅠㅠ그나마 다행인건... merge push 하지 않았다는점...? merge push 하기 전 되돌리는 방법! 1. 병합 중단 및 리셋 병합 하고 있던 작업들을 다 취소하고 병합 전 파일로 돌아가는 것이다. git merge --abort 2. 병합 중단 후 특정 파일 되돌리기이 방법은 특정 파일만 되돌리는건데여기서 --theirs 옵션은 병합할 때 반대쪽(여기서는 pull 받아온 브랜치)의 변경 사항으로 파일을 덮어씌우겠다는 의미 즉, 그 브랜치의 내용을 그대로 가져오게 되는것이다.git checkout --theirs 되돌리고자 하는 파일path를 적어줌 git checkou.. 2024. 8. 22. [React]useReducer 보호되어 있는 글 입니다. 2024. 8. 20. 이전 1 2 3 4 5 6 7 ··· 29 다음 728x90 반응형
