2022/06/01 (6) 썸네일형 리스트형 리액트 디자인패턴 : 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 다음
