상태관리

"상태" 란?

유저와의 상호작용을 위한, 변할 수 있는 데이터

• 가게 이미지
• 가게 이름
• 별점과 점수
• 리뷰와 사장님 댓글 개수
• 찜(하트)
• 최소주문금액
• 배달팁
• ...

눈에 보이지 않더라도 해당 기능을 작동시키기 위해 어딘가에 저장되어 있는 데이터들도 포함

✅ 프론트엔트 개발자의 임무는?

• 유저에게 UI/UX 제공
• 유저와 데이터 주고 받기

"상태관리" 란?

유저와의 상호작용을 위해 상태를 조작하고 다루는 모든 작업

• 상태는 언제든 비동기적/지속적으로 변할 수 있음.
• 따라서, 상태가 언제 어디서 왜 변경되는지 추적하기 용이하도록 잘 관리해주어야 함

상태관리가 제대로 이뤄지지 않는다면?

• 불필요한 리렌더링
• 의도하지 않은 UI/UX
• 유지보수하기 힘든 코드

SPA의 등장

SPA(Single Page Application)

• 오늘날 유저들은 즉각적인 상호작용과 깔끔한 UX를 선호
• 이러한 니즈에 맞춰 SPA가 유행하게 됨
• React, Vue.js 등 SPA를 지원하는 프레임워크의 경우
  DOM 접근 없이도 데이터가 변경되면 값을 변경할 수 있음
• DOM이 아닌, 데이터 중심의 상태관리를 통해
  어디에서 언제 어떻게 상태 변화가 일어났는지 추적이 용이해짐.

React

• 리액트는 단방향 데이터 흐름을 가짐
• 상위 컴포넌트 State 에서 상태를 저장하고,
  props로 하위 컴포넌트에 상태를 넘겨줌
• 의존된 컴포넌트가 많다면, 위 과정을 반복하며 상태관리를 하게 됨
• 과하게 반복될 경우 또 다시 상태 추적이 어려워지는 prop drilling 문제 발생
• 위 문제를 해결하기 위해 Redux 등장

  • Redux = Flux + reducer

• 전역 상태 관리 라이브러리
• 컴포넌트들의 의존성 분리
• Redux DevTools - 상태 변화 추적이 용이
• 그러나 보일러 플레이트 코드를 많이 작성해야 하고,
  API 통신 관련 코드를 전역적으로 관리해야 하는 불편함 발생
• Redux Tookit 등 대 상태관리 라이브러리 등장

마냥 좋기만 할까??

좋은 리액트 상태 관리란?

1. 무분별한 전역 상태관리 지양
: 합성 컴포넌트를 적절히 활용하여 Prop Drilling 해소
2. 서버의 데이터를 전역 상태에 저장할 때는 명확한 전략 설정
: 명확한 전략이 없다면, 라이브러리 활용
3. 상태 코드는 연관 컴포넌트들과 최대한 가까이 배치 (State colocation)
: 하나의 컴포넌트가 많은 상태를 가지고 있다면 너무 많은 일을 혼자 처리하는 것일 수 있음