DesignPattern2 [React] 리엑트 디자인 패턴: Return Component From Hooks React Design Patterns: Return Component From Hooks "Partical Application"으로 부터 영감을 받은 새로운 형식의 패턴: Material-UI와 타입스크립트를 이용한 예제와 함께 훅이 리엑트 커뮤니티에 소개된 지 수년이 흘렀고, 이로 인해 코딩 패턴에 많은 변화가 생겼다. 이번 글에서는, 'partial application'에서 영감을 받은 새로운 패턴에 대해 공유해보고자 한다. 필자는 이를 'Return Component From Hooks'라고 부른다. 간단한 예제로 시작해보자: 팝업 메뉴를 여는 버튼을 추가하자 메뉴를 열고 닫는 상태 관리 메뉴 아이템 클릭 핸들러 import React from "react"; import Button from.. 2022. 6. 30. Presentational and Container Components 리엑트 애플리케이션을 제작할 때 아주 유용한 간단한 디자인 패턴이 있다. 오랫동안 리엑트를 사용해 본 사람이라면, 이미 알고 있을 것이다. 해당 포스팅에서 아주 잘 설명하고 있긴 하지만 몇가지 좀 더 설명하고자 한다. 컴포넌트를 두개의 카테고리로 나눈다면 컴포넌트를 재사용하고 이해하는 데에 아주 쉬워진다는 사실을 알 것이다. 필자는 이를 Container-Presentational이라고 부르는데 Fat-Skinny, Smart-Dumb, Stateful-Pure, Screens-Components라고도 불리기도 한다. 정확히 같은 개념은 아니지만 비슷한 개념을 공유하는 말이다. 필자가 정의하는 presentational 컴포넌트란: 어떻게 보일지를 관여한다. presentational과 container.. 2022. 6. 21. 이전 1 다음
