React Design Pattern

React 를 어떻게 더 잘 쓸 수 있을까? 더 좋은 방법은 없을까?

Chapter

1. Container & Presentation

2. Custom Hook

3. State Reducer

4. Data Provider

5. HOC

6. Render Props

7. Compound

8. Memoziation

   • useCallback
   • useMemo
   • memo

9. Lazy import

   • lazy

10. Transition

    • useTransition
    • startTransition

11. Optimistic UI

    • useOptimistic

실행 방법

git clone https://github.com/miinhho/react-design-pattern.git
cd react-design-pattern
pnpm i

pnpm dev

참고자료

• https://refine.dev/blog/react-design-patterns/
• https://patterns-dev-kr.github.io/

Note

forwardRef 를 통해 하위 컴포넌트의 DOM 에 접근하는 패턴은 React 19 에서 ref 를 prop 으로 전달이 가능해졌고, forwardRef 가 deprecated 예정이기 때문에 제외했습니다.