리엑트를 통한 개발

리액트는 뷰나 앵귤러와 비교했을때 가장 큰 차이점은 단방향 바인딩
자식에서 부모의 상태를 바꾸려면 해당 상태를 컨트롤하는 함수를 Props로 넘겨줘야하는데...
이것이 반복되다 보면 props drilling이 발생하게 된다는 문제가 있다.

단방향 바인딩??

부모에서 자식으로만 state를 props로 전달할 수 있고, 자식의 props를 부모에게 직접 전달할 수는 없는 개념이다.

상태란?

상태는 사용자의 액션에 따라 변경될 수 있는 컴포넌트의 부분을 나타내는 Javascript 객체입니다. 상태는 단순하게 컴포넌트의 메모리라고 말할 수도 있습니다.

사용자가 일반적인 리액트 앱에서 작업을 수행하면 컴포넌트의 상태가 변경됩니다. 나쁘진 않지만, 앱의 크기가 커지기 시작하면 문제가 됩니다. 따라서, 이러한 앱의 복잡성은 의존성을 추적하는 것을 극도로 어렵게 만듭니다.

ex) 로그인 유저의 상태 , 쇼핑몰(카트에 상품이 담긴 상태 등등 ) 하나의 액션은 많은 다른 컴포넌트에 영향을 줍니다.

상태 관리 라이브러리 Redux, , Mobx, Hooks, Recoil

redux이전에는? MVC 아키텍처가 많이 사용됨

컨트롤러가 여러 모델을 제어하고, 모델과 뷰가 서로를 바라보는 구조로, 모델과 뷰가 양방향으로 영향을 미치기 때문에 프로젝트의 규모가 커지고 상태가 많아질수록 관리가 어려워집니다.

redux 가장큰 특징

• store에 모든 상태를 저장하는 중앙집중방식
• 리덕스는 오직 하나의 스토어만 가지며, 하나의 객체 트리를 가지기 때문에 디버깅이 용이합니다.
• 스토어 내부의 상태는 action 객체에 의해서만 변경될 수 있습니다. 모든 상태 변화들이 하나의 store에 집중되어 있고 오직 단방향으로 일어나기 때문에 항상 예측 가능한 결과를 낳게 됩니다.
• 리듀서는 순수함수로써 상태를 변경하는 것이 아닌 새로운 상태를 반환하게 됩니다.

Redux 가장 많이 사용됨

Redux를 사용하면 앱의 상태를 한 곳에서 관리하고 앱의 변경사항을 보다 예측 가능하고 추적 가능한 상태로 유지할 수 있습니다.
Redux with React를 사용하면 상태를 끌어올리는 번거로움이 없어져 어떤 액션이 변경되었는지 쉽게 추적할 수 있으므로 앱이 간편해지고 유지관리가 쉬워집니다.

커뮤니티 지원

React 와 Redux의 공식 바인딩 라이브러리인 React-Redux는 대규모 사용자 커뮤니티가 구축되어 있습니다. 이를 통해 도움을 요청하고, 모범 사례에 대해 배우고, React-Redux를 기반으로 하는 라이브러리를 사용하고, 다양한 어플리케이션에서 지식을 재사용할 수 있습니다.

성능 향상

React Redux는 성능 최적화를 보장하여 필요할 때만 연결된 컴포넌트를 다시 렌더링 합니다. 따라서 앱의 상태를 글로벌하게 유지하는 것은 문제가 되지 않습니다.

Redux를 통한 상태 예측

Redux에서는 상태를 항상 예측 할 수 있습니다. 동일한 상태와 액션이 리듀서로 전달되는 경우, 리듀서는 순수 함수이기 때문에 동일한 결과를 얻습니다. 상태 또한 불변이며 절대 변하지 않습니다. 즉, 이전 상태를 왔다 갔다 하며 실시간으로 결과를 확인 할 수 있습니다.

로컬 스토리지를 통한 상태 지속성

앱의 상태 중 일부를 로컬 스토리지에 유지하고 새로고침 후 복원할 수 있습니다. 이를 통해 카트 데이터와 같은 것을 로컬 스토리지에 저장할 수 있습니다.

서버 사이드 렌더링

서버 사이드 렌더링을 위해 Redux를 사용할 수 있습니다. 서버 요청에 대한 응답과 함께 앱의 상태를 서버로 전송하여 앱의 초기 렌더링을 처리 할 수 있습니다.

유지보수성

Redux는 코드를 설계하는 방법에 대해 엄격하기 때문에 함께 협업을 할 때 어플리케이션의 구조를 쉽게 이해할 수 있습니다. 이것을 일반적으로 유지보수를 더 쉽게 해줍니다.

쉬운 디버깅

Redux를 사용하면 어플리케이션을 쉽게 디버깅할 수 있습니다. 액션과 상태를 로깅하면 코딩 오류, 네트워크 오류 및 운영 중에 발생할 수 있는 기타 버그 유형을 쉽게 이해할 수 있습니다.

Mobx

리덕스에 비해 사용율이 현저히 떨어짐, 하지만 러닝커브가 리덕스보다 상대적으로 낮음

Mobx 단점

• MobX의 경우 리덕스와 달리 store가 여러 개가 될 수 있는데요, 이는 분리가 용이해 편리할 수도 있는 반면 상태 변경시 다수의 스토어가 영향을 받을 수 있습니다.

• 리덕스와 다르게 스토어의 데이터를 액션의 발행없이 업데이트할 수 있는데요, 이는 구현은 쉽고 용이하지만 테스트나 유지보수의 측면에서는 문제를 일으킬 수도 있습니다.

그렇기에 장기적인 프로젝트, 유지보수 및 확장성을 고려해야 하는 프로젝트의 경우에는 MobX는 좋지 않은 선택일 수 있습니다.

작은 프로젝트를 혼자 진행할 떄 사용해봐야 겠다.

Recoil 상태관리 최신의 툴

React Hooks 상태관리

Redux의 경우와 같이, 우리의 어플리케이션에서 사용하기 위해서는 약간의 보일러 플레이트 코드가 필요합니다. 따라서 불필요한 복잡성을 야기합니다.
Context API와 리액트 Hooks를 사용하면 외부 라이브러리를 설치할 필요가 없습니다. 이를 통해 어플리케이션의 전역 상태 관리를 훨씬 간편하게 처리할 수 있습니다.

useReducer와 useContext 사용

useReducer와 함께 useContext 를 사용하면 컴포넌트의 상태 관리가 다른 수준에서 이루어집니다. useReducer로 생성된 상태와 디스패치 함수를 모든 최상위 컴포넌트에 전달 할 수 있습니다. 또한 상태를 전역으로 만드는 가장 상위 컴포넌트가 될 수 있습니다. 리액트 props만을 사용해서 정보를 전달할 수도 있지만, 리액트의 Context API를 사용하면 컴포넌트 트리에 모든 것을 명시적으로 전달하지 않고도 어디서든 상태 및 디스패치 함수를 사용할 수 있습니다.