From 6320038307a89a88dd1749810e56f023fe802de3 Mon Sep 17 00:00:00 2001 From: yujin Date: Wed, 20 Aug 2025 13:22:46 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20=EA=B9=80=EC=9C=A0=EC=A7=84=20=EC=B1=95?= =?UTF-8?q?=ED=84=B0=209/10=20=EB=82=B4=EC=9A=A9=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...51\354\204\261\355\214\250\355\204\264.md" | 33 +++++++++++++++ ...0\354\271\231_\354\240\201\354\232\251.md" | 41 +++++++++++++++++++ 2 files changed, 74 insertions(+) create mode 100644 "\352\271\200\354\234\240\354\247\204/5\354\243\274\354\260\250/CH_10_\355\225\251\354\204\261\355\214\250\355\204\264.md" create mode 100644 "\352\271\200\354\234\240\354\247\204/5\354\243\274\354\260\250/CH_9_\353\246\254\354\225\241\355\212\270_\354\204\244\352\263\204\354\233\220\354\271\231_\354\240\201\354\232\251.md" diff --git "a/\352\271\200\354\234\240\354\247\204/5\354\243\274\354\260\250/CH_10_\355\225\251\354\204\261\355\214\250\355\204\264.md" "b/\352\271\200\354\234\240\354\247\204/5\354\243\274\354\260\250/CH_10_\355\225\251\354\204\261\355\214\250\355\204\264.md" new file mode 100644 index 0000000..094a32c --- /dev/null +++ "b/\352\271\200\354\234\240\354\247\204/5\354\243\274\354\260\250/CH_10_\355\225\251\354\204\261\355\214\250\355\204\264.md" @@ -0,0 +1,33 @@ +# 리액트 관련 개념 정리 + +## 1. 고차 함수 (Higher-Order Function) +- 다른 함수를 **인자로 받거나**, +- 함수를 **반환하거나**, +- 또는 두 가지 특징을 모두 가진 함수 + +--- + +## 2. 고차 컴포넌트 (HOC, Higher-Order Component) +1. 컴포넌트를 전달받아 새로운 **개선된 버전의 컴포넌트**를 반환하는 함수 +2. 기존의 컴포넌트에 **기능을 추가**할 수 있도록 하는 패턴 + +--- + +## 3. 리액트 훅 (React Hooks) +1. 상태가 있는 로직을 컴포넌트에서 분리할 수 있게 하여 **독립적인 테스팅과 재사용**을 가능하게 함 +2. 컴포넌트 구조를 바꾸지 않고도 상태가 있는 로직을 **재사용**할 수 있음 + +--- + +## 4. 헤드리스 컴포넌트 패턴 (Headless Component Pattern) +1. **로직을 캡슐화**하지만 렌더링과 관련된 UI는 포함하지 않는 함수/컴포넌트 +2. 다양한 형태로 나타내야 하는 영역에서 복잡한 로직을 **재사용**할 때 유용함 + +### 장점 +- 재사용성 +- 관심사 분리 +- 유연성 + +### 단점 +- 높은 진입장벽 +- 과도한 추상화 위험 diff --git "a/\352\271\200\354\234\240\354\247\204/5\354\243\274\354\260\250/CH_9_\353\246\254\354\225\241\355\212\270_\354\204\244\352\263\204\354\233\220\354\271\231_\354\240\201\354\232\251.md" "b/\352\271\200\354\234\240\354\247\204/5\354\243\274\354\260\250/CH_9_\353\246\254\354\225\241\355\212\270_\354\204\244\352\263\204\354\233\220\354\271\231_\354\240\201\354\232\251.md" new file mode 100644 index 0000000..56472bd --- /dev/null +++ "b/\352\271\200\354\234\240\354\247\204/5\354\243\274\354\260\250/CH_9_\353\246\254\354\225\241\355\212\270_\354\204\244\352\263\204\354\233\220\354\271\231_\354\240\201\354\232\251.md" @@ -0,0 +1,41 @@ +# 리액트의 동시성 모드 (Concurrent Mode) + +## 1. 비동기 렌더링 +- 렌더링 중이더라도 더 중요한 작업(우선순위)이 생기면 중단하고, 해당 중요 작업을 먼저 처리한 뒤 렌더링을 이어서 수행 +- **예시:** 사용자가 스크롤을 하는 동안 배경 데이터가 로드될 때 → 스크롤 동작을 우선 처리하여 화면 끊김 방지 + +## 2. 우선순위 기반 작업 처리 +- **높은 우선순위:** 사용자 입력, 애니메이션 +- **낮은 우선순위:** 비동기 업데이트, 백그라운드 데이터 로드 + +## 3. 중단 및 재개 +- 렌더링 작업을 중단하고 나중에 이어서 처리 가능 + +--- + +# 단일 책임 원칙 (SRP, Single Responsibility Principle) + +## 1. Render Prop 패턴 +- prop으로 함수를 컴포넌트에 전달 (고차 함수 형태) + +## 2. 합성을 통한 단일 책임 원칙 적용 +- 작은 컴포넌트를 합성하여 각 컴포넌트가 단일 책임을 가짐 + +--- + +# 의존관계 역전 원칙 (DIP, Dependency Inversion Principle) + +- 객체에서 어떤 **class**를 참조해야 하는 상황이 생기면, + - 그 class를 직접 참조하는 것이 아니라, + - 그 대상의 **상위 요소(추상 클래스 or 인터페이스)** 를 참조하도록 설계해야 함. + +--- + +# 명령과 조회 책임 분리 원칙 (CQRS, Command Query Responsibility Segregation) + +- 메서드나 함수는 **명령(Command)** 이거나 **조회(Query)** 둘 중 하나만 수행해야 함. +- 동시에 두 가지 기능을 해서는 안 됨. + +## 구분 +- **명령 메서드 (Command):** 객체의 상태 변경을 수행, 값을 반환하지 않음 +- **조회 메서드 (Query):** 객체의 상태를 변경 없이 읽음