240223

한라봉봉·2024년 2월 23일

기업연계 BE 교육 TIL

목록 보기

56/58

useCallback

useCallback 또한 메모이제이션 기법으로 컴포넌트 성능을 최적화 시켜주는 도구이다.

앞서 알아본 useMemo을 복습하면 useMemo는 자주 쓰이는 값을 메모이제이션 즉 캐싱해준다. 그리고 그 값이 필요할때 다시 게산을 하는 것이 아닌 useMemo를 통해 캐싱을 한 값을 메모리에서 꺼내와서 재사용한다. useMemo에 인자로 콜백함수를 넣어주면 함수가 리턴하는 값을 메모이제이션 하는 것이다.
(랜더링시 날아가지 않고 캐시에 저장되어 계속 사용)
[]로 인해 마운트시에만

    const [value,setValue] = useState('');
    const onChange = useCallback((e) =>{
        setValue(e.target.value);
    },[]);

React Developer Tools

기본 리액트 icon install

https://react-icons.github.io/react-icons/

성능개선

import React, { useCallback, useState, useRef } from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';


function createBulkTodos(){
  const array = [];
  for (let index = 0; index < 2500; index++) {
    array.push({id:index,text:'할일'+(index+1),checked:false});
  }
  return array;
}


const App = () => {
  const [todos,setTodos] = useState(createBulkTodos);
  const onToggle = useCallback((id) =>{
    // 전체리스트(배열)을 map()으로 순회
    setTodos(todos.map(todo => 
      // {spread 연산자}로 todo for문 돌리고, todo.checked 값을 반전함
      todo.id === id? {...todo, checked:!todo.checked} : todo)
    );
  })
  const nextId = useRef(2501); //id 관리용으로 다음번호를 붙여줌
  const onInsert = useCallback((text) => {
    const nextTodo={id:nextId.current, text:text, checked:false};
    setTodos(todos.concat(nextTodo));
    nextId.current = nextId.current + 1;
  },[todos]);

  //TodoListItem에서 remove button click -> id
  const onRemove = useCallback(
    (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
    },[todos]
  );
  return (
    <TodoTemplate>
      <TodoInsert onInsert={onInsert}/>
      {/* props로 내리기 */}
      <TodoList todos={todos} onRemove={onRemove} onToggle={onToggle}/>
    </TodoTemplate>
  );
};

export default App;

아래와 같이 지연 발생
rank확인시 주요 지연원인 파악됨

체크박스 하나만 바꿔도 리랜더링 중이므로!

DB

Bulk: 다량의 데이터 넣기

https://javairus.tistory.com/18

수정 전 SQL

	<insert id="add" parameterType="com.dto.Receiver$Info">
		insert into tb_receiver(receiver_key, token, user_id, amount, is_received, receiver_date) 
		values(#{receiver_key}, #{token}, #{user_id}, #{amount}, #{is_received}, #{receiver_date})
	</insert>
 

수정 후 SQL

	
	<insert id="addList" parameterType="com.dto.Receiver$Info">
		insert into tb_receiver(receiver_key, token, user_id, amount, is_received, receiver_date)
		values
		<foreach collection="list" index="index" item="receiver" separator=",">
		(
			#{receiver.receiver_key},
			#{receiver.token},
			#{receiver.user_id},
			#{receiver.amount},		
			#{receiver.is_received},		
			#{receiver.receiver_date}		
		)		
		</foreach>
	</insert>