본문 바로가기

TypeScript2

useCallback과 useMemo: React 컴포넌트 최적화를 위한 훅 사용법 React는 웹 애플리케이션을 효과적으로 구축하는 것을 목적으로 하는 UI 라이브러리입니다. 여기서 성능 최적화는 중요한 요소인데, 이를 위해 React에서 제공하는 주요 기능 중 하나가 Hook입니다. useCallback은 주로 메모이제이션된 콜백 함수를 반환하는 데 사용됩니다. 이전에 계산된 결과를 캐시에 저장하여 동일한 입력이 들어올 경우 다시 계산하는 것이 아닌 캐시에서 값을 반환합니다. 이로 인해 함수 컴포넌트가 효율적으로 업데이트되고, 렌더링 성능이 향상됩니다. 반면, useMemo는 콜백 함수를 직접 반환하는 것이 아니라 콜백 함수가 실행된 결과의 값을 반환하는 데 사용됩니다. 즉, useMemo는 계산량이 많은 함수를 실행하는 것을 방지하고, 꼭 필요한 경우에만 함수를 실행하여 성능을 최.. 2023. 6. 21.
TypeScript에서 [key: string]: any;를 사용하는 방법과 주의사항 TypeScript의 인터페이스를 사용하면, 객체의 구조와 모습을 명확하고 명시적으로 정의할 수 있습니다. 인터페이스의 일부로 [key: string]: any;를 사용하게 되면, 객체에 동적인 속성을 추가할 수 있습니다. [key: string]: any; 의 사용 방법, 이점, 주의사항, 그리고 대안에 대해 설명하겠습니다. 사용 방법 interface Example { [key: string]: any; } const exampleObject: Example = { name: 'John', age: 30, address: { street: '123 Main St', city: 'New York', state: 'NY', zip: '10001' } }; 위 코드에서, Example 인터페이스에 [key.. 2023. 6. 20.