Skip to content

Latest commit

 

History

History
252 lines (170 loc) · 8.42 KB

1주차_정리.md

File metadata and controls

252 lines (170 loc) · 8.42 KB

10/31 All_in_one_state (1주차)

장소 : 강남역 1 스파크플러스 라운지 시간 : 19:30 참여자 : 이지훈,최여진,성지현,심미진,심현준,조명근,류지예

GitHub PR

각자 의견/경험

👨‍💻 이지훈

React Hooks → Context API → 외부 라이브러리(Recoil) → Zustand

기술 스택 변경이유

  • Props drilling 문제 해결을 위해 Context API 도입
  • Context의 리렌더링 이슈로 Recoil 도입
  • Recoil의 의존성 추적 어려움으로 Zustand 채택

마인드셋

발제 당시 회사에서 많이 다룬 부분이기도해서 상태에 대한 내용이 궁금 리액트에서 사용하는 라이브러리들관련 질문을 하셨을 때 대답하지 못한것에 생각하게 됨 깊게 파고 들고 싶어하는 부분이 상태..

본인 공부 방법
  • 공부 방법 -> 책에서 나오는 부분보다는 직접 코드를 보고 공부하는 방식이면 좋겠다.
  • claude를 쓸때, 이렇게 작성하기를 원하고 어떠한 특정 컨벤션을 학습시키는 경우도 존재
  • maintainer를 등록해서 어떤 관점에서 코드를 바라보는지 등을 학습시킨 AI를 활용
  • 내가 공부하다가 다른 사람에게 물어보고 싶은 내용도 공유
  • 주제를 정하고 -> 이야기할 것을 정함 -> 예시 코드를 짜서 보여줄 수도 있으며, 실제 코드를 분석하는 방식도 있을 것
  • claude 학습시키고 활용하는 것을 강추

공식문서를 기반으로 AI를 돌리거나, 자료를 찾아 스토리텔링으로 남에게 공유할 수 있으면 좋겠다. 공부 방식의 공유도 좋을 것 같다.

미션을 못하게 된다면 미리 말을 해주면 좋을 것 같다 책임감을 가지고 미션을 임하면 좋겠다

👨‍💻 류지예

사용 경험

  • Redux를 통한 로그인/토큰 관리
  • AccessToken/RefreshToken 관리
  • 보안을 고려한 쿠키 활용
  • 장바구니 상태 관리
  • 전역 상태 필요성 인식
  • Redux 도입

상태 분리

  • React Query로 서버 상태 관리
  • Redux로 클라이언트 상태 관리

마인드셋

회사가 커져감에 따라서 다른 개발자가 들어왔을 때 유지보수성이 좋은 코드로 만들어 보고 싶음. 다양한 상태관리 라이브러리를 사용하면서 배워보고 싶음.

👨‍💻 심현준

  • 미니멀한 상태관리 지향
  • Zustand + React Query 조합 선호
  • 서버사이드 렌더링 고려한 설계

마인드셋

(다같이) 잘하자. 시너지를 내서 성장하자

"상태관리는 최대한 미니멀하게 가져가고, 남는 에너지로 더 좋은 아키텍처 설계와 코드 퀄리티 향상을 목표로 한다"

👨‍💻 성지현

사용 경험

  • RTK, React Query 활용
  • Context API 적극 활용
  • 리렌더링 방지를 위한 분리 작업 필요성 인식

관심사

  • 옵저버 패턴 실제 적용 방안
  • Immer 동작 원리

마인드셋

마법같이 느껴지는 상태관리 라이브러리를 자세히 배워서 원리를 알고 싶다. 기본적인 상태 관리 패턴이나 각 라이브러리에 적용해서 실제 적용 사례들을 알고 싶다. 내부 동작 방법을 알고 싶다. 왜 해당 라이브러리를 쓰는지 알고 싶다. 해당 라이브러리를 쓰는 장점을 알고싶다. -> 남과 공유하고 알아가는 것도 좋은 경험이 될 것 같다.

👨‍💻 조명근

Redux → Recoil → Zustand + React Query

기술스택 전환이유

  • Redux: 큰 보일러플레이트 부담
  • Recoil: 유지보수 어려움
  • Zustand: 간단한 상태관리와 좋은 커뮤니티

마인드셋

상태 관리 라이브러리의 핵심 원리들을 코드 단에서 파보고 싶음 아예 오픈소스 들어가서 어떻게 코딩하는지 패턴은 어떻게 되는지, 코드 관리는 어떻게 되는지 궁금 경험들을 공유하는 것도 좋다 전역 상태, 외에도 다양한 상태를 관리하는 방법들을 공유하고 싶다.

👨‍💻 최여진

다양한 라이브러리 경험해봄

  • Redux: 예측 가능한 상태 흐름
  • MobX: 객체지향적 아키텍처
  • Zustand: 간단하고 가벼움
  • React Query: 서버 상태 관리 용이

레이어드 아키텍처에 관심있음(Component Layer, Controller Layer, State Layer, API Layer)

마인드셋

회사에서 주로 mobX만 사용해서 다른 라이브러리에 대한 경험이 부족 다른 라이브러리가 mobX 다르게 동작하는 원리가 궁금함 동작 원리 뿐 아니라 상태 관리 방법, 상태를 무엇으로 둬야하는지 궁금함 상태 관리라는 것이 보안, 새로고침 등등 신경써야할 부분이 많음 상태를 두는 기준을 이야기하면서 만들어 가고 싶다. mobx 마스터

mobx 장점

  • 리덕스에 비해서는 보일러플레이트가 적음
  • 객체지향적

👨‍💻 심미진

useState → ContextAPI → Recoil → Zustand

기술스택 전환이유

  • ContextAPI: 불필요한 리렌더링
  • Recoil: 사이드 이펙트 우려
  • Zustand: 클로저를 통한 안전한 상태 관리

마인드셋

비슷함. useState 면접과정이 인상깊음 내가 만드는게 웹브라우저에서 어떻게 영향을 미치는지 알고 싶음. 공부한 내용을 정리해서 발표하고 싶은 목표

공부해면 좋은 주제

1. 중앙 집중형과 분산형 상태 관리

  • Redux의 단일 저장소와 Jotai/Recoil의 원자적 접근 방식 비교하기
  • 실제 장단점 및 사용 사례

2. 리렌더링 최적화 기법

  • React의 렌더링 동작 이해하기
  • 메모화 패턴을 살펴보고, 장/단점 파악하기
  • 상태 선택자에 대해 알아보고, 영향력 파악하기

3. 비동기 상태 관리

  • 다양한 접근 방식에 대한 비교(thunks, sagas, observables)

4. React 상태 관리 아키텍쳐

  • Fiber 아키텍처에서의 상태 관리 메커니즘
  • React의 내부 dispatcher 구현 분석
  • Preserving and Resetting State
  • React 18의 동시성 렌더링과 상태 관리

5. Zustand 심층분석

  • Vanilla Store와 React Store의 차이점과 내부 구현
  • create vs createStore의 차이점 분석
  • 상태 구독 메커니즘과 subscribe 메서드 구현 분석
  • 불변성 관리와 immer 미들웨어 동작 원리
  • 비동기 상태 관리 패턴 (async actions)
  • useShallow 성능 평가/개선

6. Redux 미들웨어 아키텍쳐

  • Redux Toolkit의 내부 구현과 최적화 전략
  • createSlice와 createReducer 동작 원리
  • RTK Query의 캐싱 메커니즘과 데이터 무효화 전략
  • Redux Saga vs Redux Thunk 동작 원리 비교
  • Redux의 상태 정규화 패턴과 구현
  • combineReducers의 내부 구현 분석
  • Selector 패턴과 메모이제이션 전략

7. Mobx 반응형 프로그래밍 모델

  • MobX의 Proxy 기반 관찰 가능성 구현
  • Transactions와 Actions의 자동 배칭
  • makeAutoObservablevs makeObservable 차이점
  • MobX의 Computed Values 캐싱 메커니즘
  • Reactions(autorun, reaction, when)의 동작 원리
  • MobX-State-Tree 아키텍처 분석
  • MobX의 메모리 누수 방지 전략
  • 상태 지속성과 하이드레이션 구현

8. Recoil, Jotai 비동기 셀렉터와 비동기 모델

  • Recoil의 상태 의존성 그래프 구현
  • Atom Effects와 상태 초기화 전략
  • atomFamily와 selectorFamily 동작 원리
  • 트랜잭션 관리와 상태 일관성 유지 방법
  • Primitive Atoms vs Derived Atoms 구현 분석
  • Jotai의 상태 하이드레이션 구현
  • Atoms 간의 의존성 관리 방식
  • Recoil vs Jotai 아키텍처 비교

고민해보면 좋을 내용

  • 스터디에 서버 상태관리 라이브러리(reactquery)를 포함할까?
  • 상태관리 아키텍쳐 구조에 관심이 있을까요?
  • 매주 19:30 목요일 스터디 진행 여부
  • 발표자료 정리

주차별 계획

2주차 : React 상태 관리 아키텍쳐

  • [공통주제] : 상태가 변화하는 과정을 Deep하게 공부해보기

  • 1번 React 19에서 상태의 개념과 동작원리가 변하는가?? (심미진)

  • 2번 useSyncExternalStore, external store에 대해 공부하기 (성지현,이지훈)

  • 3번 동시성과 병렬성이 리엑트에서 어떻게 해석되는가? (조명근, 류지예)

  • 4번 Fiber(파이버) 아키텍처에서의 상태 관리 메커니즘 (심현준, 최여진)