The document outlines the structure and functionality of a shopping application using React components and higher-order components (HOCs). It discusses various aspects such as custom hooks for managing data and stateful components for handling UI interactions. Additionally, it includes examples of component implementation and their respective properties for efficient rendering and user experience.

2. N A V E R S H O P P I N G 2

3. N A V E R S H O P P I N G 3

4. N A V E R S H O P P I N G
UI
4

5. N A V E R S H O P P I N G
- /shopping
- /smartstore
5
- /share

6. N A V E R S H O P P I N G
&& stateful
&& stateful
&& stateful
&& stateful
6
stateful ? (state )
- event handler
- data fetch
- …

7. N A V E R S H O P P I N G
&& stateful
7
-> ! !

8. N A V E R S H O P P I N G
&& stateful
8
-> HOC (Class Component)
-> Custom hook (Functional Component)

9. N A V E R S H O P P I N G 9
HOC
(Higher order component)
const componentB = HOC(componentA)

10. N A V E R S H O P P I N G 10
HOC
(Higher order component)
/shopping/../ProductList.tsx
class ProductList extends React.Component<Props, {}> {}
export default withPaging(ProductList)
/smartstore/../ProductList.tsx
class ProductList extends React.Component<Props, {}> {}
export default withPaging(ProductList)
/share/../withPagingHoc.tsx
export const withPaging = WrappedComponent => {}

11. N A V E R S H O P P I N G 11
HOC
(Higher order component)
export const withPaging = WrappedComponent => {
return class extends React.Component<{}, OwnState> {
...
render() {
return (
<WrappedComponent
{...this.props}
handlePrevBtnClick={this.handlePrevBtnClick}
handleNextBtnClick={this.handleNextBtnClick}
/>
)
}
}
}
export const withPaging = ProductList => {
return class extends React.Component<{}, OwnState> {
...
render() {
return (
<ProductList
{...this.props}
handlePrevBtnClick={this.handlePrevBtnClick}
handleNextBtnClick={this.handleNextBtnClick}
/>
)
}
}
}

12. N A V E R S H O P P I N G
Custom hooks
12
const StoreNewsButton: React.FC<Props> = props => {
useNewsCompleteLayer({ … })
…
+)
return (<>element1</>)
}
const LayerNewsButton: React.FC<Props> = props => {
useNewsCompleteLayer({ … })
…
+)
return (<>element2</>)
}

13. N A V E R S H O P P I N G
export const useNewsCompleteLayer = (
storeName: string,
isOnNews: boolean,
//
) => {
const handleCompleteLayer = () => {}
const handleErrorLayer = () => {}
useEffect(() => {
//
}, [isOnNews])
}
Custom hooks
13
share/…/newsLayerHook.tsx

14. N A V E R S H O P P I N G
&& stateful
14
-> WrapperComponent

15. N A V E R S H O P P I N G 15
<Wrapper>

16. N A V E R S H O P P I N G 16
<Wrapper>
import BenefitComponent from '@share/mobile/components/Product/Benefit'
const BenefitWrapper: React.FC<Props> = props => {
return (
<BenefitComponent
{...{
fetchBenefit: fetchStoreBenefit,
benefits,
}}
/>
)
}
import BenefitComponent from ‘@share/mobile/components/Product/Benefit'
const BenefitWrapper: React.FC<Props> = props => {
return (
<BenefitComponent
{...{
fetchBenefit: fetchHomeBenefit,
benefits,
}}
/>
)
}
shopping/…/BenefitWrapper.tsx
smartstore/…/BenefitWrapper.tsx

17. N A V E R S H O P P I N G 17
<Wrapper>
import BenefitComponent from '@share/mobile/components/Product/Benefit'
const BenefitWrapper: React.FC<Props> = props => {
return (
<BenefitComponent>
<BenefitTitle {...{ fetchBenefit: fetchStoreBenefit }} />
<Content {...{ benefits }} />
</BenefitComponent>
)
}
import BenefitComponent from '@share/mobile/components/Product/Benefit'
const BenefitWrapper: React.FC<Props> = props => {
return (
<BenefitComponent>
<BenefitTitle {...{ fetchBenefit: fetchHomeBenefit }} />
<SubContent {...{ benefits }} />
</BenefitComponent>
)
}
shopping/…/BenefitWrapper.tsx
smartstore/…/BenefitWrapper.tsx

18. N A V E R S H O P P I N G 18
import BenefitComponent from '@share/mobile/components/Product/Benefit'
const BenefitWrapper: React.FC<Props> = props => {
return (
<BenefitComponent>
<BenefitTitle {...{ 20 !!! }} />
<Content {...{ benefits }} />
</BenefitComponent>
)
}
const BenefitTitle: React.FC<Props> = props => {
return (
<div>
...
<TotalDownloadLayer
{…{ 20 !!! }}
/>
</div>
)
}
const TotalDownloadLayer: React.FC<Props> = props => {
const {
20 !!!
} = props
}
props …

19. N A V E R S H O P P I N G 19
Context
import BenefitComponent from '@share/mobile/components/Product/Benefit'
const BenefitWrapper: React.FC<Props> = props => {
return (
<BenefitComponent>
<BenefitTotalDownloadContext.Provider value={contextState}>
<BenefitTitle />
</BenefitTotalDownloadContext.Provider>
<Content {...{ benefits }} />
</BenefitComponent>
)
}
const BenefitTitle: React.FC<Props> = props => {
return (
<div>
...
<TotalDownloadLayer />
</div>
)
} const TotalDownloadLayer: React.FC<Props> = props => {
const {
20 !!!
} = useContext(BenefitTotalDownloadContext)
}

20. N A V E R S H O P P I N G
&& stateful
20
-> . !

21. N A V E R S H O P P I N G 21
…
…
…

22. N A V E R S H O P P I N G 22
-
- ->
- ,
-
-
?

23. N A V E R S H O P P I N G 23
- ->
-
?
?
- UI
-
- !
-> Storybook

24. N A V E R S H O P P I N G 24
- UI
-

25. N A V E R S H O P P I N G 25

26. N A V E R S H O P P I N G 26
Storybook
-
- props UI
-
- UI
-
- !

27. N A V E R S H O P P I N G
!
!
27