728x90 전체 글89 제대로 알고 사용하자 useCallback, useMemo 그리고 React.memo 보통 공부를 하다보면 많이 접하는 useCallback과 useMemo는 많이들 이렇게 알고있다. useCallback : 메모이제이션된 함수를 반환 useMemo : 메모이제이션된 값를 반환 설명만 보면 리랜더링 될때 함수 또는 값을 재생성하지 않고 메모이제이션된 값을 사용하는 GOAT hook이다. 여기서 리랜더링이라하면 props가 변경되었을 때 state가 변경되었을 때 부모 컴포넌트가 렌더링되었을 때 forceUpdate() 를 실행하였을 때 의 조건으로 리액트는 리랜더링을 하고있다. 처음에 위의 hook을 보게된다면 이런생각을 할 수도 있다. 모든 함수나 값에 해당 hook을 사용해서 메모이제이션을 하면 최적화에 아주 도움이 되겠군!!! 이러한 생각을 했다면 다시한번 생각해보자. 메모이제이션을.. 2024. 3. 4. 디자인패턴 - 전략패턴 전략 패턴의 개념 전략 패턴(Strategy Pattern)은 객체지향 디자인 패턴 중 하나로, 객체를을 정의하고 각각을 캡슐화하여 상호교환이 가능하게 하는 패턴입니다. 이 패턴은 알고리즘을 사용하는 클라이언트와 알고리즘의 구현을 분리하여 유연성을 높이고, 확장성을 향상시킵니다. 예를 들어, 간단한 주문 시스템을 구현한다고 가정해봅시다. 주문을 할 때 결제 방법은 신용카드 결제, 페이팔 결제, 현금 결제 등 다양할 수 있습니다. 이때 전략 패턴을 사용하여 결제 방법을 구현할 수 있습니다. 디자인 패턴 중 하나로, 객체가 할 수 있는 행위들 각각의 전략으로 만들어 놓고 사용하며. 동적으로 전략 수정이 가능한 패턴 동일 계열의 알고리즘을 정의하고 각 알고리즘을 캡슐화 하며 이들을 상호 교환이 가능하도록 구현.. 2024. 2. 18. 디자인패턴 - 프록시 패턴 프록시 패턴 구조 패턴 카테고리 하나의 대상 객체 또는 주제객체가 있을때, 클라이언트는 바로 해당 객체에 접근하지 않고 proxy 객체를 통해 접근하는 패턴 proxy는 실제 객체와 클라이언트 사이에 존재한다. 필요한 이유 접근 권한 제어 데이터 로그 로깅 제어 은행 카드 구성요소 Client 사용자 Subject 인터페이스 Proxy 대리인 Real Subject 실제 객체 코드 // subject 인터페이스 interface Payment { request(amout: number): void; } // real subject class Cash implements Payment { request(amount: number) { console.log(`결제 요청 완료... 금액 : ${amount}`.. 2024. 2. 18. 디자인패턴 - 어댑터 패턴 어댑터 패턴 구조적 패턴 카테고리 서로 호환성이 없는 인터페이스 / 클래스 들을 연결시켜 동작 할 수 있게 도와준다. 적용 사례 외부 라이브러리 (Auth, Payment, Media) 외부 라이브러리를 사용중인데 현제 시스템상 맞지않아서 업데이트가 필요할때, 외부 라이브러리 클래스나 인터페이스에 직접적으로접근 못하는 상황일때 어댑터를 사용하여 중간에 작업을 변환한다 레거시 시스템 부분 확장 기존 시스템을 부분적으로 확장해야하는데 인터페이스나 클래스가 앱 전역에서 사용되는 비중이 클때 비용문제를 생각하여 어댑터 클래스를 부분적으로 만들어주고 호환 안되는 부분만 어댑터 클래스를 사용하여 변경한다 구성 요소 클라이언트 인터페이스 서비스/외부요소 어댑터 코드 interface ISmartDevice{ conn.. 2024. 2. 18. 디자인패턴 - 퍼사드패턴 퍼사드라는 단어는 프랑스에서 유래가 되었다고 합니다. 어떤 건물 또는 건축물의 겉면이라는 뜻입니다. 건물의 외벽에서 보면 내부 구조는 보이지 않는다는 뜻이라고 합니다. 단어에서 비롯된 이름처럼 패턴의 정의는 하나의 단순화된 인터페이스를 통해서 시스템안의 내포되어있는 기능들이나 서브클래스에 쉽게 접근할 수 있도록 도와주는 패턴입니다. 크게 2가지의 특징이 있습니다. 갼략화된 인터페이스 직접적인 접근 제한 코드 class Kitchen { cookBurger() { console.log('cooking burger'); } cookSide() { console.log('cooking side dishes'); } prepareDrinks() { console.log('pr.. 2024. 2. 17. 디자인패턴 - 팩토리 메서드 패턴, 추상 팩토리 패턴 팩토리 메서드 패턴 팩토리 패턴은 객체 생성을 추상화하여 클라이언트가 객체를 직접 생성하지 않고 팩토리에 요청하여 객체를 얻는 디자인 패턴입니다 팩토리 메서드 패턴은 객체 생성을 서브 클래스에 위임하여 객체 생성을 캡슐화하는 디자인 패턴입니다. 목적 : 단일 객체의 생성을 위해 사용됩니다. 서브 클래스에서 구현되는 팩토리 메서드를 통해 객체를 생성합니다. // 차량 인터페이스 interface Vehicle { drive(): void; } // 차량 생성을 위한 추상 팩토리 클래스 abstract class VehicleFactory { // 팩토리 메서드 abstract createVehicle(): Vehicle; // 차량을 사용하는 클라이언트 useVehicle() { const vehicle .. 2024. 2. 16. 이전 1 2 3 4 ··· 15 다음 728x90
