[React] 상태 관리 기초 개념

HAPPY JM·2022년 6월 28일
0

React

목록 보기
2/5

원티드를 눈팅하다가 상태 관리 기술 경험을 요구하는 회사를 발견했다!

MPA에서는 서버의 데이터를 이용해 페이지를 렌더링하므로, 클라이언트의 데이터와 서버 데이터가 큰 차이를 가지지 않음.
서버에서 모든 데이터를 관리함
SPA에서는 자체적으로 데이터를 갖고 서버와 동기화가 필요한 데이터만을 처리함.
서버는 데이터를 유지하지 않거나 유지하더라도 보안정보 같은 것만 다룸.

  • 그 외의 데이터는 client만의 데이터로 유지!

상태관리

컴포넌트 하나의 상태, 여러 컴퓨넌트의 상태 등을 관리한다.
서버의 데이터를 변환하여 사용할 수도 있다.
앱의 복잡도를 높일 수 있다.

상태 관리 기술을 쓰는 이유

  1. 높은 품질의 코드를 작성하는 데 유리하다.
  2. 성능 최적화 & 네트워크 최적화 등에 유리하다.
  3. 데이터 관리의 고도화가 가능하다.
    ex) local Storage 를 활용한 상태 유지
  • 변경이 잦은 데이터라면 상태관리 기술이 적합하지 않을 수도 있다.

상태 관리 기술이 해결하는 문제

  • Prop Drilling
    컴포넌트가 복잡해지는 경우, 상위 부모와 자식 컴퓨넌트 간의 깊이가 커진다.
    최하단의 자식 컴포넌트가 데이터를 쓰기 위해 최상위 컴포넌트로부터 데이터를 보내야 하는 상황에서 상위 컴포넌트가 하위 컴포넌트에 불필요하게 데이터를 전달하게 되는 것이다.
    Solution : Context API등을 활용하여 컴포넌트에서 데이터를 가져올 수 있다. => 컴포넌트 간의 결합성을 낮춘다.

상태 관리 기술의 단점

  1. Boilerplate 문제 :

    보일러플레이트: 사업상 서류·법률적 합의안 등의 표준 문안 (미리 찍어두는 틀)

  2. 파악해야할 로직과 레이어가 많아진다.
  3. 잘못 사용할 경우, 앱의 복잡도만 높이거나 성능을 악화시킬 수 있다.
profile
Junior FE Engineer | work @Pangyo

0개의 댓글