[React] 전역상태관리

🤨 SPA 란?

 

Single Page Application 의 약자로 React 의 특징이다.

 

우리가 구글 페이지를 들어가면 구글 페이지 그대로 보인다. 이때 우리가 검색을 누르든, 지메일을 누르든 서버에 어떤 요청을 하면, 서버는 이 페이지를 다시 보여주게 된다.

 

이때 기존의 페이지는 매번~~~ 우리의 요청마다 페이지가 구성이 되어있고, 요청에 맞는 페이지를 다시 구성해서 보여주게 되는데 이는 시간이 오래걸리는 과정이다.

 

하지만 SPA 로 이루어진 홈페이지는 이름 그대로 single! 한 페이지로 구성이 되어있다. 

즉 요청에 따라서 페이지 전체가 아니라, 필요한 부분만 바뀌어서 보여주게 되고 이는 시간과 데이터를 효율적으로 활용할 수 있는 방법이다.

 

💡 랜더란? 

쉽게말해서 보여준다는 것이다. 이는 다른 페이지에서 더 자세히 다루도록 하겠다...

 

 

🧐  컴포넌트란?(component) 

 

컴포넌트란, 재사용이 가능한 각각의 독립된 모듈

 

💡 재사용을 왜 해야하는데?

->

네이버 뉴스 화면 예시

 

네이버 뉴스를 검색해보면 이런 식으로 같은 부분이 반복되어 나타나는 것을 볼 수 있다. 우린 이 각각을 컴포넌트(component) 라고 부르는데 같은 것을 반복해서 사용하기 때문에 일일이 입력해줄 필요 대신, 각각을 하나의 컴포넌트로 만들어서 재사용을 해주고, 바꿀 부분만 바꾸면 되는 것이다.

 

 

🙂‍↔️ 상태(state) 란? 

 

상태란 컴포넌트 내부에서 관리되는, 어플리케이션의 렌더에 영향을 미치는 플레인 자바스크립트 객체이다.

즉 쉽게 말해서 컴포넌트 내부에서 변경 가능한 데이터를 다루기 위해 사용되는 객체이다. 

 

리액트에서는 컴포넌트에 저장한 상태가 변경되면 그에 맞는 UI 가 갱신되어 보여진다. 

 

이 글만 보면 감이 잘 잡히지 않는다... 따라서 예시를 들어 설명해보겠당

다시 네이버로 들어가보자

 

> 이렇게 우리가 네이버 화면 안에서 소식 더보기 칸을 보면

'엔터'를 눌렀을 때와 '스포츠'를 눌렀을 때 보이는 화면이 달리 구성이 되지만

네이버 전체의 화면은 바뀌지 않는다. 

 

화면 내에서 '엔터'를 눌렀을 때의 상태와 '스포츠'를 눌렀을 때의 상태를 달리 구성하고 있기 때문이다. 

즉 이렇게 상태란 변경되었을 때 출력되는 값을 지정해줄수도 있고 현재의 상태를 직접 지정해줄 수도 있다.

 

😱 props(properties) 는 뭐야?

 

props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용하는 객체다.

컴포넌트가 사용할 수 있는 다양한 속성과 값을 포함한다.

props를 통해 컴포넌트 간에 데이터를 전달하고, 컴포넌트를 재사용 가능하게 만들 수 있다.

 

이때 자식 컴포넌트에서는 props를 변경할 수 없고, 부모 컴포넌트에서 전달된 값을 그대로 사용해야 한다.

 

 

📌 전역상태, 지역상태

 

전역상태(global state) 란? 

어떤 흐름에도 얽매이지 않고 코드 전체에서 사용가능한, 즉 전역에서 사용가능한 상태를 말한다. 

 

지역상태(local state) 란?

특정 컴포넌트 내에서만!!! 사용하는 것이다.

 

💡 전역상태를 관리해야하는 이유?

 

애플리케이션의 여러 컴포넌트가 동일한 데이터를 필요로 하는 경우, 전역 상태 관리를 통해 데이터를 공유할 수 있다.

즉 다시 말해서 하나의 상태를 여러 곳에서 사용하기 위해서 prop에 전달을 해서 사용을 하는데

props의 전달이 많아질수록 코드를 읽을 때 해당 prop을 추적하기 힘들어지고 그에 따라 유지보수도 더욱 어려워진다. 

 

 

예를 들어, 사용자 인증 정보를 여러 컴포넌트에서 필요로 하는 경우, 전역 상태를 사용하면 각 컴포넌트가 중앙 저장소에서 동일한 데이터를 참조할 수 있다.

 

따라서!

전역 상태 관리를 통해 불필요한 상태 전달을 줄이고, 필요한 컴포넌트만 리렌더링할 수 있다.

예를 들어, 상위 컴포넌트에서 하위 컴포넌트로 상태를 전달할 때, 모든 하위 컴포넌트가 리렌더링되는 문제가 발생할 수 있는데, 전역 상태 관리를 사용하면, 상태 변경에 따라 특정 컴포넌트만 선택적으로 업데이트할 수 있다

 

 

💡 상태관리 라이브러리

 

상태 관리 라이브러리는 애플리케이션의 상태를 중앙에서 관리하고, 컴포넌트 간에 상태를 공유하며, 상태 변경을 예측 가능하고 일관성 있게 만들어주는 도구이다.

 

ex. Redux, Recoil, MobX... 등

 

 

 

어떤 상태관리를 쓰면 좋을지에 대한 포스팅은 다음 글에서 해야겠당..