2022/06 (64) 썸네일형 리스트형 리액트 디자인패턴 : Render Props(렌더 프롭스 패턴) TLDR : 렌더 프롭 패턴 = 컴포넌트 내 비즈니스 로직(캡슐화) + 비즈니스 로직 결과물을 이용한 렌더링 hook과 함께 렌더 프롭스 패턴은 죽었다는 의견이 많다. 하지만 아직 활용처가 남아있다는 사람이 있다. 특정 조건에서는 Render Props Pattern이 hooks보다 낫다는 것이다. 바로 선택적 렌더링이다. 렌더 프롭은 선택적으로 렌더 체인을 단락하고 다른 view로 일찍 반환할 수 있다. 즉 렌더 로직을 바이패스하는 서킷 브레이커와 같은 역할을 하는 컴포넌트들의 체인을 만들 수 있다. either monad와 비슷하다고 보면 될 것이다. DIY : 토큰을 통해 유저 정보 가져오기 사용자 id를 통해 토큰의 존재 여부를 판단한다. type Token = string; type Id = n.. 리액트 성능 최적화 : Code Splitting(코드 스플리팅) 모든 최적화 방법중에 성능이 가장 좋다. TLDR 필수사항 React suspense 필요 - 비동기 상태와 렌더링 상태의 동기화 React.Lazy 사용 default export 필요 추가 최적화 + eager loading 사용 (good) ++ 웹팩 매직 키워드를 이용한 prefetch 사용 (best) 시각적 확인 : 네트워크 탭과 커버리지 탭 사용 크롬 incognito 모드를 사용하는 것이 좋음. 크롬 확장 프로그램을 다운받지 않기 때문 커버리지 탭 사용 방법 cmd + shift + p > show coverage 서스펜스 팁 Lazy Loading 먼저 다이나믹 임포트가 필요하다. // 다이나믹 임포트. const loadGlobe = () => import('../globe') 서스펜스.. 리액트 디자인패턴 : Control Props (컨트롤 프롭스 패턴) State-Reducer-Pattern 리액트 디자인패턴 : State Reducer Pattern (스테이트 리듀서 패턴) IOC : 제어의 역전 https://itchallenger.tistory.com/261?category=1063253 제어의 역전(IOC : Inversion of Control) in React 원문 보기 사용 중인 루틴에 기능을 추가해달라는 요청을 받게 되면? 리액트 컴포.. itchallenger.tistory.com 해당 게시글에서 훅 내부의 리듀서를 오버라이딩 하는 방법을 배웠다. 때로는 훅 내부의 상태를 전적으로 외부에서 관리하고 싶을 수 있다. TLDR : State Reducer 패턴과 동일하게 리듀서 오버라이딩 onChange 콜백을 이용해 외부 상태관리 지원 .. 리액트 디자인패턴 : 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)은 디폴트 외에.. 리액트 디자인패턴 : Compound Components (컴파운드 컴포넌트 패턴) TLDR : Compound Component 패턴은 컴포넌트에 (암시적으로 상태를 공유하는) 선언적 서브 컴포넌트 API를 제공하는 방법이다. 컴파운드 컴포넌트 패턴이란? 컴파운드 컴포넌트 패턴은 하나의 완벽한 컴포넌트를 구성하는 암시적 상태 공유 컴포넌트 API 집합을 제공하는 방법이다. 우리는 html의 select구성요소에서 이미 유사한 API를 본 적이 있다. Option 1 Option 2 아래 jsx와 차이가 뭘까? 가장 큰 문제는 스타일을 커스터마이징 하기 어렵다는 것일 것이다. 또한 내부에 다른 종류의 엘리먼트를 지원해야 하는 api들을 제공할 경우, 일은 더 복잡해진다. 위 케이스의 경우 각각의 option은 굉장히 유연한 api다. 반대로 아래 케이스의 경우 내부 컴포넌트의 refer.. React children with typescript. 리액트 children 컴포넌트 타이핑 원문 : https://isamatov.com/react-typescript-children-prop/ Using React children prop with TypeScript I'll cover each of the types used for children prop and discuss the trade-offs so you can pick the right one for your use case. isamatov.com 추가 : PropsWithChildren라는 리액트 자체제공 타입이 있습니다. 이걸 활용합시다. https://itchallenger.tistory.com/641 리액트 디자인패턴 : 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.. 이전 1 ··· 5 6 7 8 다음
