Project/Time Map3 [문제 해결] 리액트에서 최신 상태 보장 방법 09.23.2023 1. 문제 발생 React DnD를 이용해서 드래그 앤 드랍 기능을 이용하던 도중 알 수 없는 문제를 마주쳐 거의 하루를 고민했던 것 같다. Page.tsx import { useState } from 'react'; import DragTargetLine from '/my/path'; interface Activity { id: number; planId: number; } const testData: Activity = { id: 1, planId: 1, }; function Plan(): JSX.Element { const [activities, setActivities]: (Activity : object)[] = Array.from({ length: 24 }, () => ({.. 2023. 9. 24. [React] Modal을 재사용 가능한 컴포넌트로 리팩토링하기 08.30.2023 1. 처음 디렉토리 구조 - root -- src --- A component ---- Modal --- B component ---- Modal --- C component ---- Modal 모달컴포넌트가 중복된다. 그래서 목표는 Modal을 컴포넌트로 재사용할 수 있게 리팩토링하는 것이다. 목표하고 있는 디렉토리 구조는 다음과 같다. - root -- src --- Modal --- A component ---- Content --- B component ---- Content --- C component ---- Content Content는 Modal 안에 들어갈 컴포넌트이다. 2. Modal Componentization Modal에서는 기본적으로 Parent로부터 setM.. 2023. 8. 30. 메모이제이션이란?(useMemo, useCallback) in React.js 06.26.2023 1. 메모이제이션의 정의 같은 함수가 같은 값을 계속 리턴해야할 때, 첫 번째 값을 메모리에 저장해놓고 메모리에서 값을 불러와 재사용하는 메모리 사용 기법. 2. 활용도 2-1. useMemo 예를 들어 이러한 함수형 컴포넌트가 있다고 하자. function Component () { const result = calculate(); return {result} } function calculate () { // 무거운 작업을 하는 코드 return 10; } 이 컴포넌트가 렌더링이 될 때마다 calculate은 무거운 작업을 계속해야 할 것이다. 그러나 result는 항상 10일 때, 성능이 비효율적이 될 것. 이럴 때 메모이제이션을 사용하여 해결 가능 function Compone.. 2023. 6. 26. 이전 1 다음