[World Article #9] React Design Patterns: You Should Know in 2023 - by Saurabh Barot

(작성중...)

1. The HOC (Higher Order Component) Pattern

  - memo (React 내장 HOC)

  - withRouter (React-Router)

  - connect (React-Redux)

  - withStyles (MUI)

  - Q. class형 말고 함수 컴포넌트로 작성 가능?

  - Q. Redux의 flux 패턴이란?

  - 예시) memo, withRouter

2. The Provider Pattern

  - React-Redux, Mobx 등 상태 관리 라이브러리의 기본

  - React 내장 Context API 기반

  - 핵심은 Avoid Props Drilling

    - Q. 그 사이 props 필요없는 컴포넌트도 리렌더링 같이 발생?

  - 예시) 어드민

3. Presentational & Container Component Pattern

  - 클래스형 대신 함수 컴포넌트로 작성 가능

  - 예시) 벨로퍼트님 코드

4. React Hooks Design Patterns

  - useState, useEffect

  - 예시) 해당 아티클 코드

5. Compound Component Pattern

  - Context API 활용

  - 예시) flex 개발자분 아티클, 해당 아티클 코드 예시 다시 살펴보기 (이상함)

6. React Conditional Rendering Design Pattern

  - Conditional Rendering in React using If

  - Conditional Rendering in React using If/else

  - Conditional Rendering in React using Ternary Operator

  - Conditional Rendering in React using && operator

    - React 18 docs에서 key prop force re-rendering 관련 내용 다시 살펴보기
    - 조건문별 별도 분기 처리 vs. 하나로 && 이용해서 처리

    - null coalesing && operator result when not true vs. return null

  - Conditional Rendering in React using Switch Case

7. Render Props Pattern

  - 예시) 실제 사용 예시 리서치 필요

8. State Reducer Pattern

  - useState vs. useReducer (performance 측면)

  - 예시) useReducer 훅 이용

---

[React Design Patterns: You Should Know in 2023] - Saurabh Barot