상태관리란(ContextAPI,Redux)?
상태관리란?
쉽게 말해서 상태 즉 데이터를 관리하는 방법
상태(state)란?
웹페이지 내에서 눈이 보이는 데이터 + 서버와 주고 받는 데이터(눈에 보이지 않는 데이터) 모두.
리액트의 ‘상태’ ⇒ 컴포넌트의 변경 가능한 동적인 데이터
리액트 어플리케이션은 여러개의 컴포넌트들을 사용해서 만들어짐
쉬운예시)
-> 각각의 컴포넌트안에는 "기억"해야하는 동적인 데이터(ex.현재Input값,이미지 등)인 상태가 있음. 이 상태를 사용하여 자신의 모양이나 동작을 바꿀 수 있다.
상태관리가 필요한 이유?
⇒ 어플리케이션, 프로젝트가 커짐으로써, 컴포넌트들 간 공유하는 상태의 관리가 어려워짐.
⇒ 어떠한 작용으로 인해서 상태 변화가 나타날때, 상태가 "언제, 어떻게, 왜" 변화하였는지 알 수 없어 제어하기 힘들다.
상태관리 라이브러리 (ContextAPI, Redux)
ContextAPI
최상위 컴포넌트가 있고, 하위에 페이지 역할을 하는 A,B컴포넌트가 있고 그 밑에 또 수많은 컴포넌트가 있음.
- props의 한계 : 자신의 바로 위에 있는 컴포넌트로부터 데이터를 전달받아야함.
7번,8번 컴포넌트가 원하는 데이터값이 최상위 컴포넌트에 들어있을때
→ 전달받는 방법으로 props를 사용한다면?
- 7번 컴포넌트 경우 : 최상위 → B →3 →7
- 8번 컴포넌트 경우 : 최상위 → A → 1 → 4 → 8
ContextAPI 방법을 사용하면❗️
context라는 상자를 만들어서
→ 상자 안에 전달해주고 싶은 데이터를 넣고
→ 원하는 컴포넌트에 연결
→ 연결된 컴포넌트뿐만아니라 그 컴포넌트 하위에 속한 컴포넌트도 모두 상자에 직접적으로 접근가능
연결하고자 하는 7,8번 컴포넌트에 바로 연결도 가능하고, 최상위 컴포넌트에 연결하면→ 간단한 문법으로 통해 하위 컴포넌트도 모두 직접적으로 접근 가능!
<장점>
- 사용하기 쉬움
- 다른 라이브러리 설치가 필요없어 번들의 크기를 키우지않음. react에서 자체 기능
<단점>
- 느리다. context 변경되면 실제로 사용여부와 관계없이 Context를 사용하는 모든 하위 컴포넌트가 리렌더링이 된다. ⇒ 따라서 업데이트 빈도가 높거나, context를 통해 전체 어플리케이션에 상태를 공유하는 것은 과도한 렌더링을 야기해서 비효율적이게 된다.
Redux
store이라는 파일 안에 필요한 변수 지정 → 다른 컴포넌트에서 store 안에 있는 변수가 필요할 때 꺼내쓸 수 있음
리덕스 → state(상태) 수정 방법 다 지정해줌 → 다른 컴포넌트는 수정 요청만 할 수 있게 제한해두고, 수정요청을 하면 방법대로 수정 ⇒ 버그가 생겼을때 추적하기 쉬움.
⇒ store를 통해 상태를 업데이트하거나, 새로운 상태를 전달받음
- 어플리케이션 하나당 스토어는 하나(여러개 스토어를 만들 수 있지만 권장되지않음)
- 기존의 상태는 유지되고, 새로운 상태는 업데이트 되는 방식을 사용함 → 기존의 상태를 직접 수정하면 안됨
<장점>
- 상태 요소 일부가 업데이트되면, 이 상태를 사용하는 구성요소만 업데이트
- 기존의 상태는 변경되지 않고 업데이트되기때문에 이전 업데이트,업데이트 기록에 따라 추적해서 디버깅에 도움을 줄 수 있음.
- 개발자들이 가장 많이 사용, 커뮤니티도 활발
<단점>
- 배워할 것들이 많음. 어려움
- 상태(state)를 어떻게 바꿀지 미리 만들어나야함.
- 보일러플레이트(최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드)가 많음. 예를 들어, 액션 타입 정의, 액션 생성자 함수 정의, 리듀서 함수 정의 등이 이에 해당한다. 각각의 기능을 추가할 때마다 이러한 코드를 반복해서 작성해야 하기 때문에 코드의 양이 늘어나고 유지보수가 어려워집니다→ 복잡한 구조
- 따로 라이브러리 설치해야하기때문에 번들 크기 증가
참고자료
State: A Component's Memory – React
The library for web and native user interfaces
react.dev
리덕스는 무엇이고, 왜 사용하는가?
🔧 리덕스 리덕스란, 자바스크립트 애플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 도구입니다. 복잡한 상태관리가 이루어지는 SPA(Single Page Application)에서 특히 유용하게 사용됩
velog.io