[WIL] 상태관리

✍️상태관리 왜 하는지?, state 관리 어떻게 하는지?

네이버 단어 번역

 

상태

어플리케이션의 화면에 영향을 끼치는 자바스크립트 객체 즉 "변화하는 데이터"

 

 

상태의 종류 

상태는 크게 범위의 개념에서 전역상태(Global State)와 컴포넌트 간 상태(Cross Component State), 그리고 지역상태(Local State), 세가지로 나눌 수 있다.

 

• 지역상태 : 특정 컴포넌트 안에서 관리되는 상태를 뜻한다. 다른 컴포넌트들과 데이터 공유 되지 않는다 ex) input, selectbox

 

• 컴포넌트 간 상태 : 여러가지 컴포넌트에서 관리되는 상태를 뜻한다. 예를들어 모달로 보통 사우이 컴포넌트에서 하위 컴포넌트 prop을 넘겨 해당 컴포넌트까지 전달 되도록 하는 Prop Drilling 방식이 필요하다.

*Prop Drilling : 오직 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트를 거치며 컴포넌트에서 다른 컴포넌트로 전달하는 과정

 

• 전역상태 : 프로젝트 전체에 영향을 끼치는 상태, 예를들면 유저기능이 있다. 이 또한 Prop Drilling 방식을 활용한다.

---

---

상태관리는 왜 필요한가 ?

서로 다른 두 컴포넌트에 같은 데이터가 필요하다고 할때, 데이터를 부모 컴포넌트로 보내고, 다시 그 데이터 필요한 컴포넌트로 전달해야한다. 하지만 이렇게 Prop Drilling이 많아지면 이 prop이 어디에서 왔는지 추척하기 어려워 진다는 점에서 상태관리 툴을 선택해 상태를 잘 관리해야 한다.

 

*상태 관리를 위한 툴 : Context API, Redux(toolkit), React Query

 

좋은 상태관리 방법

1. 기본적으로 일반적인 경우에는 지역 상태로 데이터를 관리하는 것을 권장한다.
   
   • 지역상태로는 State는 관련 컴포넌트들고 최대한 가까이 배치 되는게 좋다. 만약 관련 컴포넌트와 멀어진다면 관련 없는 컴포넌트 리렌더까지 일으킬 위험이 있다.
2. 지역 상태로 데이터를 관리 시 다수의 컴포넌트 간에 상태 의존성이 높아진다면 전역 상태로 데이터를 관리하는 것을 권장한다.
3. 전역 상태 관리 시 서버에서 가져오는 데이터(DB)와, UI 상태를 나타내는 데이터는 분리하여 다룬다. 
4. 서버 데이터 캐싱 시 전역 상태로 다루면 안된다. 서버 상태를 관리하려면, SWR이나 React-Query 와 같은 서버 캐싱 전용 라이브러리를 사용하는 것을 권장한다.

---

🎯출처

 

https://mingule.tistory.com/74

React에서 상태관리하기 (feat. Context API, Redux, React Query)

https://chanhuiseok.github.io/posts/react-15/

[React] 상태관리 라이브러리에 대하여

https://han-py.tistory.com/487

[react] 상태관리 기초 - 효율적으로 데이터 저장하고 수정하기