리액트 (23) 썸네일형 리스트형 리액트 디자인패턴 : State Reducer Pattern (스테이트 리듀서 패턴) IOC : 제어의 역전 https://itchallenger.tistory.com/261?category=1063253 제어의 역전(IOC : Inversion of Control) in React 원문 보기 사용 중인 루틴에 기능을 추가해달라는 요청을 받게 되면? 리액트 컴포넌트는 props를 추가하고, 리액트 훅은 argument를 추가할 것이다. 구현 로직은 점점 복잡해진다. 이같은 조치는 다 itchallenger.tistory.com 자바는 익명 클래스의 메서드를 오버라이딩하여 파라미터로 넘기는 코딩이 있다. (요즘은 람다-문법적 설탕임.) 이는 특정 객체의 특정 메서드를 호출한다. 이는 js에서 콜백을 넘기는 것과 동일(isomorphic)하다. 제어의 역전이란 내 코드의 실행을 다른 API에.. 리액트 디자인패턴 : Prop Collections and Getters (프롭 컬렉션 엔 게터 패턴) 두 줄 요약: Prop Collections and Getters Pattern을 이용해 컴포넌트의 props을 조회, 재사용할 수 있다. 특정 prop을 overriding해서 사용할 수 있다. 토글 버튼을 생각해보자. aria-pressed의 상태도 변경해줘야한다. toggle함수 내에서 on 플래그를 변경해줘야 한다. toggle함수 호출을 위해 onClick 함수도 호출해야 한다. 해당 상태는 캡슐화하여 컴포넌트 안에서만 관리할 수도 있다. 그런데 항상 상태를 캡슐화하는게 답은 아니다. 해당 상태 관리는 컴포넌트 내부로 캡슐화되어도, 해당 상태를 사용자가 조회하여 사용하고 싶을 수 있다. 사용자 props 조회를 위한 props collections 또한, 일부 프롭(onClick)은 디폴트 외에.. 리액트 디자인패턴 : Context Module Function (컨텍스트 모듈 함수 패턴) facebook의 코드베이스에서 자주 등장하는 패턴이라 합니다. Context Module Function 패턴은 유틸리티 함수로 reducer를 감싸는 패턴입니다. 목적 : 사용자에게 dispatch(action)를 숨깁니다. useContext훅은 순수한 dispatch 함수를 넘깁니다. utility함수는 해당 dispatch함수와 파라미터만 넘깁니다. 헬퍼 함수는 분명 다시 구현하게 될 객체 쓰레기입니다. 그냥 dispatch를 사용하세요. Dan on Twitter “@kentcdodds I intentionally said dispatch 🙂 dispatch is better than helper methods. Helper methods are object junk that we need t.. React Remix 신상 React framework 간단하게 살펴보기 Remix - Build Better Websites Remix - Build Better Websites Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff. remix.run Why I Love Remix (kentcdodds.com) Why I Love Remix I've written tens of thousands of lines of code with Remix and .. Suspense with a Custom Hook 훅의 장점은 인터랙션, 사이드이펙트, 메모이제이션을 추상화 / 캡슐화 할 수 있다는 점 위 로직들을 별도로 분리하여 재사용 할수 있다는 것이다. 아래와 같이, 데이터와 상태만 남기고 업데이트 코드를 전부 훅 안에 캡슐화 할 수 있다. (isPending은 애니메이션 지연 시간 의미) const [pokemonResource, isPending] = usePokemonResource(pokemonName) 구현은 아래와 같이 한다. const SUSPENSE_CONFIG = { timeoutMs: 4000, busyDelayMs: 300, busyMinDurationMs: 700, } const PokemonResourceCacheContext = React.createContext({}) function.. Suspense와 Image 이미지의 placeholder가 없으면 레이아웃이 깨지기 쉽다. 이미지 캐시, 이미지 플레이스홀더 사용, Render as you fetch를 구현해보자. function preloadImage(src) { return new Promise(resolve => { const img = document.createElement('img') img.src = src img.onload = () => resolve(src) }) } 이미지 서스펜스 활용의 기본 1. 서스펜스 데이터를 렌더링할 뷰를 구현한다. lazy로 코드 스플리팅하기 위해, default로 내보낸다. (데이터와 코드 동시에 가져오기.) // 리소스는 이렇게 가져옴. function createPokemonResource(pokemonName.. useTransition : suspend pending 상태 시간 조작 주의 : 해당 내용은 실제로 적용 불가능한 내용임. 문제를 어떤 방식으로 해결하는지에만 집중하자. Disable timeoutMs argument by acdlite · Pull Request #19703 · facebook/react (github.com) 너무 빨라서 로딩 상태가 안보이는것도 일관성이 없어 좋지 않은 사용자 경험을 줄 수 있음. 이것을 "flash of loading content" 라 함 해당 문제를 개선해보자 아래와 같이 설정 객체를 만든다. const SUSPENSE_CONFIG = { timeoutMs: 4000, // 4초 이상 걸리면 pending state표시 busyDelayMs: 300, // css전환을 위해 최소 시간 예약해둠 busyMinDurationMs: 70.. useTransition : fallback 컴포넌트 보여주는 시간 조절 주의 : 해당 내용은 실제로 적용 불가능한 내용임. 문제를 어떤 방식으로 해결하는지에만 집중하자. Disable timeoutMs argument by acdlite · Pull Request #19703 · facebook/react (github.com) 너무 빨라서 로딩 상태가 안보이는것도 일관성이 없어 좋지 않은 사용자 경험을 줄 수 있음. 이것을 "flash of loading content" 라 함 해당 문제를 개선해보자 아래와 같이 설정 객체를 만든다. const SUSPENSE_CONFIG = { timeoutMs: 4000, // 4초 이상 걸리면 pending state표시 busyDelayMs: 300, // css전환을 위해 최소 시간 예약해둠 busyMinDurationMs: 70.. 이전 1 2 3 다음
