2022-12-15(목)
❗recjected master -> master (FETCH FIRST) 에러
VS코드에서 내용수정 후 팀깃에 올리는 과정 중
[rejected] master -> master (fetch first) 위 에러가 났음
알고보니 기존데이터가 손실될수있어서 푸쉬를 막은것이다.
아래 명령으로 강제로 푸쉬해주면 된다.
$ git push origin +master위 코드를 입력하자 해결 됨!
다운받을 것
yarn add axios
yarn add react-redux @reduxjs/toolkit
yarn add json-server
다운받고 리액트 start할때
터미널 2개 켜서 아래 코드 각각 쳐서
리액트서버랑 json서버 같이 켜줘야함 (포트번호 3005)
yarn start
yarn json-server --watch db.json --port 3005
성능최적화를 위한 react-hook 3가지
- Memo
- useCallback
- useMemo
> Memo ?
Memo라는 함수는 component에 불필요한 리렌더링을 하지 않도록 도와주는 함수.
- 불필요한 리렌더링 : 화면에서 변경 되는 부분이 없을 때에도 불구하고 화면이 다시 렌더링됨
import {memo} from "react"
&
export default memo(Button); (예시)> useCallback ?
component가 리렌더링 되더라도 생성된 함수를 새로 만들지 않고 재사용하고자 할 때 사용하는 hook. useCallback은 useEffect의 사용법과 굉장히 유사하다. useEffect를 사용할 때는 두번째 파라미터에 의존성 배열을 넣고 그 의존성 배열 안에 들어있는 값이 변경될 때만 다시 실행되도록 되어있는데 useCallback도 마찬가지로 두 번째 매개변수 자리에 의존성 배열을 받고 그 안에 값이 변경될 때만 useCallback안에 함수를 생성하는 로직을 갖고 있다.
const onClickHandler = () => {
console.log("hello button!");
};
// 위 함수에 useCallback()을 넣어보면,
const onClickHandler = useCallback(() => {
console.log("hello button!");
}, []);
// useCallback의 첫번째 파라미터에 원래 쓰던 함수를 넣어주고 두번째에 의존성 배열을 넣어줌
// ==> 이렇게 바꾸어주면 함수를 매번 재생성하지 않고 사용할 수 있음useMemo ?
useCallback과 똑같은 기능을 하는 hook. 다만 그 대상이 함수가 아니라 배열이나 객체와 같은 값일 때 사용한다. 사용 원리, 방법 모두 useCallback과 같음.
import { useMemo } from "react";
//import 해주기❗주의할 점
최적한 hook이라고 해서 Memo, useCallback, useMemo의 무분별한 사용은 오히려 perfomance 성능에 악영향이 될 수 있다.
이 hook들을 무분별하게 남용을 하게 되면 굳이 비교하지 않아도 될 것들을 리액트가 비교하는 과정을 추가해서 퍼포먼스 성능에 악영향이 될 수 있다.
-> 이런 기능을 사용할 때는 정말 불필요한 렌더링이 이루어지고 있는게 맞는지, 개선이 필요한게 맞는지 확인 후 사용하여야 한다.
➕원시타입데이터, 즉 setState를 사용하지 않는 let으로 선언된 변수들은 useMemo를 사용하지 않아도 리렌더링이 되지않아 굳이 useMemo를 사용하지 않아도 됨 !
참고자료💟
fetch first 에러 해결
