07/17 월 필기

import React, { useMemo, useState } from 'react';

const getAverage = (list) => {
  console.log('평균값 계산');
  if (list == null || list.length === 0) return 0;
  let sum = 0;
  for (let i = 0; i < list.length; i++) {
    sum += list[i];
  }
  return sum / list.length;
};
//-------------------------------------------------------------------------

함수 컴포넌트 내부

const Average = () => {
  const [list, setList] = useState([10, 50, 30, 70, 100]);
  const [number, setNumber] = useState('');

  const onChange = (e) => {
    setNumber(e.target.value);
  };

  const onClick = (e) => {
    setList(list.concat(parseInt(number)));
    setNumber('');
  };

  const avg = useMemo(() => {
    // POINT) useMemo는 외부에 있는 함수에의해 결과 값을 전달받아서 캐싱을 한 것!
    console.log('useMemo작동');
    return getAverage(list);
  }, [list]);

  return (
    <div>
      <input value={number} onChange={onChange} />
      <button onClick={onClick}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}> {value} </li>
        ))}
      </ul>
      <div>
        <b>평균값 : </b>
        {getAverage(list)}
        {/* {avg} */}
      </div>
    </div>
  );
};

export default Average;

이유
리턴에서 {getAverage(list)}을 출력할 시
input 태그 안의 값에 onChange 함수를 걸어두어서 input 태그 안의 값이 바뀐 때마다 렌더링이 일어나고 그 때마다 getAverage 함수가 호출된다.

이유
리턴에서 {avg}를 출력할 시
useMemo()함수에 의해서 list 배열의 변화가 있을 시에만 getAverage 함수가 호출된다.
다른 onChange 함수의 렌더링마다 호출되던 것과 상반됨

useEffect로 구현하기

useCallback

useMemo와 useCallback 비교

useMemo 는 함수 컴포넌트 "외부"에 있는 함수의 값에 대해 캐싱하는 것이 목적.

useCallback은 렌더링 될때 "내부"에 있는 함수를 생성하는 것에 대해 캐싱하는것이 목적. 성능이 올라간당

잠깐 복습

8.6 useRef

reducer 복습

색인 배열 연관배열

색인 배열 [] : 장점이자 목적 =>속도 빠름 (단 순서가 맞아야 한다)
연관배열 {} : 장점이자 목적 =>유연성 (키명이 없어도 됨. 없으면 걍 무시 (undefined) 안쥬금
색인 배열은 인덱스 있어서 순서가 바뀌면 안되지만
연관 배열은 key값만 맞으면 되기 때문에 순서가 상관 없다.

성능 vs 유연성 을 놓고 개발자가 선택해야할 문제
=> 키가 변동성이 있는가 없는가
내부적인 함수호출 빈번한 경우에는 : 색인
람다구문 호출되는 함수 반복적으로 많이 호출 : 색인