React 컴포넌트에서 함수를 props로 자식 컴포넌트에 전달하는 경우, 불필요한 함수 재생성으로 인해 자식 컴포넌트가 매번 리렌더링되는 문제가 발생할 수 있다. 특히 React.memo와 함께 사용할 때 이 문제가 더욱 두드러진다. 이를 방지하고 성능을 개선하기 위해 useCallback을 활용한 최적화가 필요하다.이번 글에서는 useCallback을 적용해 함수 재생성을 방지하고 렌더링 최적화를 이룬 사례를 소개한다.문제 상황아래와 같이 작성된 코드에서, onCreate, onUpdate, onDelete 함수는 컴포넌트가 렌더링될 때마다 새로 정의된다.const onCreate = (content) => { dispatch({ type: "CREATE", data: { ... }, ..
React에서 연산 비용이 크거나 불필요하게 반복될 수 있는 계산은 useMemo를 통해 최적화할 수 있다. 이 글에서는 useMemo를 사용한 코드와 사용하지 않은 코드를 직접 비교하면서 어떤 차이가 있는지 명확하게 설명한다.예제 시나리오: 완료된 작업 수 계산하기🔸 useMemo를 사용하지 않은 경우function TodoStats({ todos }) { const doneCount = todos.filter((todo) => todo.isDone).length; console.log("✅ 계산됨"); return 완료된 항목: {doneCount};}이 코드는 todos 외의 다른 상태 변경이 있어도, 예를 들어 검색어 입력 등으로 렌더링이 발생하면 doneCount 계산이 매번 실행된다.?..
