[항해99] Week05. WIL – 리액트 전역상태관리

👩🏻‍💻 Weekly I Learned 📚

 

 

⭐ React 전역상태관리

전역 상태 관리란, 말 그대로 전역에서 상태를 관리한다는 말입니다. 리액트에서는 상위에서 하위로 상태 값을 전달하며 관리를 하게 되는 시스템입니다. 아래의 사진처럼 리액트 프로젝트를 만들다보면 수많은 컴포넌트들이 발생합니다. 이 때 상태값을 전달 전달하게 되면 당연히 헷갈리고, 필요없는 값도 전달하게 되는 상황이 발생하게 됩니다.

 

이 때 불필요한 props를 전달받아야하는 상황에서 props drilling 이라는 문제가 발생하기도 합니다.

• props drilling
  
  리액트 컴포넌트에서 다른 부분으로 데이터(props)를 전달하는 과정에서 오로지 전달만을 위해서 여러 컴포넌트를 거치는 상황을 말합니다.

이런 불필요한 props drilling 문제를 해결하기 위해서 전역 상태 관리가 필요합니다.

상태를 관리하기 위해서 크게 두 가지 방법으로 나뉘는데, 하나는 리액트 hook 중 하나인 Context API를 쓰는 것이고 다른 하나는 Redux를 사용하는 것입니다.

⭐ Context API

React hook으로 있는 거라서 따로 라이브러리를 설치하지 않아도 쓸 수 있다.

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.
React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어 등이 있습니다. 예를 들어, 아래의 코드는 버튼 컴포넌트를 꾸미기 위해 테마(theme) props를 명시적으로 넘겨주고 있습니다.

⭐ Redux

일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다. 여기에 더해서 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공합니다.

Context API vs Redux 사용의 차이점

[항해99] Day22. TIL – Redux를 사용하는 것과 Context API 사용의 차이점

 

 

💜 Week

리액트를 사용하는 법을 배웠다고 볼 수 있었던 지난 3주. 지난 3주가 순삭되었다.
다음주부터 백엔드랑 함께 작은 프로젝트를 만들어 볼 예정이다. 제일 걱정되는 부분은 내 실력도 실력이거니와 백엔드와 함께 맞춰나가야 합 부분이 제일 걱정된다. 아직 서로가 쓰는 언어에 제대로 익숙해진 것도 아닐텐데 무언가를 함께 맞춰서 만들어야한다니 걱정부터 앞선다. 그저 서로를 배려하고 이해해줄 팀워들을 만나기를!