diff --git "a/week3/\354\203\235\352\260\201\352\263\274\354\240\234.md" "b/week3/\354\203\235\352\260\201\352\263\274\354\240\234.md" new file mode 100644 index 0000000..db18b81 --- /dev/null +++ "b/week3/\354\203\235\352\260\201\352\263\274\354\240\234.md" @@ -0,0 +1,116 @@ +# + +# React에서 상태관리는 왜 필요한가? + +React는 단방향 데이터 흐름. + +컴포넌트는 상태를 가지고 있고, 이 상태를 변경하면 UI가 자동으로 업데이트. 따라서, 애플리케이션의 상태를 효율적으로 관리하기 위해 상태관리가 필요. + +상태 관리를 통해 애플리케이션의 데이터를 중앙에서 관리하고, 컴포넌트 간의 상태 공유를 효율적으로 할 수 있음. + +# 관리 해야 하는 상태에 대한 기준은 무엇인가? + +상태 변경이 다른 여러 컴포넌트에 영향을 끼치는 경우, 관리가 필요한 상태. ex) 로그인 정보, 전역 상태 + +# 상태관리 라이브러리 + +## Redux + +### 장점 + +- 예측 가능한 상태 관리를 제공하여 애플리케이션의 복잡성을 관리하기 용이. +- 강력한 개발자 도구와 생태계를 가지고 있어 개발과 디버깅을 지원. + +### 단점 + +- 번거로운 초기 설정. +- 상태 관리를 위한 추가적인 코드 작성 필요. + +### 상황 + +대규모 애플리케이션 또는 복잡한 상태 관리가 필요한 경우. + +## MobX + +### 장점 + +- 간단하고 직관적인 API를 제공하여 쉽게 상태를 관리 가능. +- 자동으로 상태 감지 및 업데이트를 처리하여 개발자의 작업을 간결화. + +### 단점 + +- 상태 변화의 추적이 어렵고 직관적인 예측이 어려움. +- 생태계가 Redux에 비해 상대적으로 작음. + +### 상황 + +- 중규모 애플리케이션 또는 개발 생산성과 코드 간결성이 중요한 경우. + +## Context API + +### 장점 + +- React에 기본적으로 내장되어 있어 추가적인 라이브러리 설치가 필요없음. +- 컴포넌트 계층 구조에서 데이터를 효과적으로 전달 가능 + +### 단점 + +- 상태 업데이트 최적화가 부족하여 성능 이슈가 발생할 수 있음. +- 복잡한 상태 관리에는 제한적. + +### 상황 + +- 작은 규모의 애플리케이션 또는 단순한 상태 관리가 필요한 경우에 사용. + +## Recoil + +### 장점 + +- React 공식 Recoil 라이브러리로써, React와의 완벽한 통합을 제공. +- 상태를 원자적(atomic)으로 관리하여 상태 간의 종속성을 명시적으로 처리. +- 비동기 상태 관리 용이. + +### 단점 + +- 아직은 상대적으로 새로운 라이브러리이기 때문에 생태계가 다른 라이브러리에 비해 상대적으로 작음. +- 상태 변화 추적에 대한 세밀한 제어가 필요한 경우에는 Redux와 같은 다른 라이브러리가 적합할 수 있음. + +### 상황 + +- 중규모 또는 대규모 애플리케이션에서 비동기 상태 관리와 유연한 상태 관리가 필요한 경우 + +# 렌더링 관리 방법 + +## 조건부 렌더링 + +조건부 렌더링을 사용하여 특정 조건에 따라 컴포넌트를 렌더링할지 여부를 결정. 이를 통해 불필요한 렌더링을 방지 및 성능 최적화. + +## React.memo 사용 + +React.memo를 사용하여 불필요한 렌더링을 방지. 컴포넌트의 props나 상태가 변경되지 않으면 렌더링 스킵. + +## 리스트 key 지정 + +리스트 컴포넌트에서 각 항목에 고유한 key를 지정하는 것은 컴포넌트 업데이트시 효율적인 비교를 할 수 있게 도와줌. + +## 상태를 최소화하고 관리 + +컴포넌트의 상태를 최소화하고 필요한 경우에만 상태를 사용하여 컴포넌트의 업데이트 범위를 최소화. 상태가 필요하지 않은 경우에는 props를 활용하여 데이터를 전달. + +## 컴포넌트 분할 + +컴포넌트를 적절하게 분할하여 작은 단위로 관리하면 렌더링 성능을 향상 가능. 필요한 부분만 업데이트하여 불필요한 렌더링 감소. + +# 비즈니스 설계 + +## 컴포넌트 계층 구조 설계 + +컴포넌트를 최대한 작고 독립적으로 설계하고 재사용 가능성을 고려 + +## 상태 관리 패턴 + +Redux, MobX, Context API, Recoil 등의 라이브러리를통한 상태 관리 + +## 비동기 작업 + +비동기 작업이 필요한 경우, 적절한 비동기 처리 방식을 선택.