10.07.22{코딩일기}벨로퍼트와 함께하는 모던 리액트 1-18 챕터리뷰

[ 새롭게 알게된 것 ]

---

 

1. useCallback은 특정 함수를 새로만들지 않고 재사용하고 싶을때 사용하는 훅(Hook)!

---

useMemo랑 살짝 비슷할 수 도 있는데,  useMemo는 특정값을 재사용하는거라면

useCallback은 함수를 재사용하는 거임. 

사실 useCallback은 useMemo를 기반으로 만들어 졌다고 함.

const onToggle = useMemo(
  () => () => {
    /* ... */
  },
  [users]
);

---

 

2. 함수 재사용이 중요한 이유는 컴포넌트  최적화를 위함임.

---

만약 props가 바뀌지 않았으면 virtualDOM에 새로 렌더링조차 하지 않아도

컴포넌트 결과물을 재사용할 수 있음.

이런걸 위해서 함수를 재사용하는것이 중요한 이유임.

 

---

 

3. 참조값을 항상 최신으로 유지 하기 위해서 deps 배열안에 상태 포함여부 잘 체크해야함.

---

useCallback 함수안에서 사용하는 전역변수 즉 props가 있다면 꼭 deps 배열안에도 포함시켜야됨.

해당 값을 넣지 않으면 함수내에서 해당값을 참조할때 최신값을 참조 못하는 끔찍한 경우가 생길 수 있다고함.

 

  const onRemove = useCallback(
    id => {
      // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
      // = user.id 가 id 인 것을 제거함
      setUsers(users.filter(user => user.id !== id));
    },
    [users]
  );

 

---

 

4. 컴포넌트 렌더링 체크는 React Dev Tools를 사용하면 됨

---

React Dev Tools가 구글크롬 확장 프로그램중 하나임을 알게됨.

이걸 설치하면, 크롬 개발자 도구에 React 탭이 뜨는데 Highlight Updates로 상태 체크해주면

리렌더링 되는거 확인가능함.

만약 로컬 파일로 브라우저를 실행시켰을땐 아래처럼 설정해주면 됨

설명따라 했는데 근데 난 왜 안될깡..

답답쓰..

개발자 빌드모드를 다시 내렸다가 올리니깐 탭이 보였다.

꼭 반드시 프로덕션 모드로 빌드를 안해도 리렌더링 되는거 체킹이 가능했다. 다행.

---