Epic React (11) 썸네일형 리스트형 리액트 디자인패턴 : Compound Components (컴파운드 컴포넌트 패턴) TLDR : Compound Component 패턴은 컴포넌트에 (암시적으로 상태를 공유하는) 선언적 서브 컴포넌트 API를 제공하는 방법이다. 컴파운드 컴포넌트 패턴이란? 컴파운드 컴포넌트 패턴은 하나의 완벽한 컴포넌트를 구성하는 암시적 상태 공유 컴포넌트 API 집합을 제공하는 방법이다. 우리는 html의 select구성요소에서 이미 유사한 API를 본 적이 있다. Option 1 Option 2 아래 jsx와 차이가 뭘까? 가장 큰 문제는 스타일을 커스터마이징 하기 어렵다는 것일 것이다. 또한 내부에 다른 종류의 엘리먼트를 지원해야 하는 api들을 제공할 경우, 일은 더 복잡해진다. 위 케이스의 경우 각각의 option은 굉장히 유연한 api다. 반대로 아래 케이스의 경우 내부 컴포넌트의 refer.. [Epic React][Build an Epic React App][Testing Hooks and Components][훅과 컴포넌트 테스트] bookshelf/INSTRUCTIONS.md at exercises/12-testing-hooks-and-components · kentcdodds/bookshelf (github.com) GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop Build a ReactJS App workshop. Contribute to kentcdodds/bookshelf development by creating an account on GitHub. github.com Background React 애플리케이션의 두 가지 빌딩 블록은 Hooks와 Components입니다. 훅을 조합해서 커스텀 훅을 만들 수도 있고, 컴포넌트를 다른 조각으로 분할할 수도 있습니다.. [Epic React][Build an Epic React App][Compound Context] bookshelf/INSTRUCTIONS.md at exercises/08-compound-components · kentcdodds/bookshelf (github.com) GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop Build a ReactJS App workshop. Contribute to kentcdodds/bookshelf development by creating an account on GitHub. github.com Background 재사용하려고 만든 컴포넌트들이 십중팔구 props가 너무 많아서 재사용하기 어렵게 된다. 컴포넌트를 Tab, Card, Modal과 같은 단위로 만들고 (Organisms?) 해당 컴포넌트 내.. [Epic React][Build an Epic React App][Context] bookshelf/INSTRUCTIONS.md at exercises/07-context · kentcdodds/bookshelf (github.com) GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop Build a ReactJS App workshop. Contribute to kentcdodds/bookshelf development by creating an account on GitHub. github.com 전역 상태는 여러 문맥으로 쪼개야 한다. Xuck Redux 리액트 쿼리와 함께 글로벌 스테이트의 대부분이라 할수있는 서버 상태를 분리했다. 이제 아래 것들과 같은 것들은 각자의 전역 상태 문맥(컨택스트)에 집어넣어 활용할 수 있다... [Epic React][Build an Epic React App][Cache Management] bookshelf/INSTRUCTIONS.md at exercises/06-cache-management · kentcdodds/bookshelf (github.com) GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop Build a ReactJS App workshop. Contribute to kentcdodds/bookshelf development by creating an account on GitHub. github.com Background 애플리케이션 상태 관리는 앱 개발자에게 가장 어려운 문제 중 하나입니다. 수많은 라이브러리가 이를 입증합니다. 이 문제는 과도한 엔지니어링, 조기 추상화, 적절한 상태 분류 부족으로 인해 훨씬 .. [Epic React][Build an Epic React App][Router][라우터] bookshelf/INSTRUCTIONS.md at exercises/05-routing · kentcdodds/bookshelf (github.com) GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop Build a ReactJS App workshop. Contribute to kentcdodds/bookshelf development by creating an account on GitHub. github.com Background CSR에서 Routing 구현 시, URL을 변경하는 방법을 제공하고, URL에 맞는 UI를 그린다. URL은 틀림없이 웹의 최고의 기능 중 하나입니다. 한 사용자가 링크를 다른 사용자와 공유하여 특정 웹사이트의 .. [Epic React][Build an Epic React App][Authentication][인증] bookshelf/INSTRUCTIONS.md at exercises/04-authentication · kentcdodds/bookshelf (github.com) GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop Build a ReactJS App workshop. Contribute to kentcdodds/bookshelf development by creating an account on GitHub. github.com Background HTTP requests 인증 특정 사용자에게 서비스를 제공하기 위해선 사용자 식별이 필요하며, 해당 사용자의 정보의 보안을 유지할 필요가 있다. 보통 id/pw 방법을 많이 사용한다. 특정 사용자를 .. [Epic React][실전] 스타일 추가하기 with Emotion👩🎤 bookshelf/INSTRUCTIONS.md at exercises/02-styles · kentcdodds/bookshelf (github.com) GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop Build a ReactJS App workshop. Contribute to kentcdodds/bookshelf development by creating an account on GitHub. github.com Background React 앱의 스타일을 지정하는 방법에는 여러 가지가 있으며 각 접근 방식에는 고유한 트레이드오프가 있다. 하지만 궁극적으로 모두 스타일시트와 인라인 스타일이다. 웹팩을 사용하기 때문에 CSS 파일을 애플리케이션으.. 이전 1 2 다음
