Coding/전역 상태 관리 라이브러리 3

[Redux] Redux-toolkit

Redux 상태를 업데이트 할 때는 항상 원본 state는 수정하지 않고 새로운 state를 반환해야한다. 프로젝트가 더 복잡해질수록 리덕스를 올바르게 사용하기도 더 복잡해진다. 리덕스에서 관리해야 할 상태가 더 많아질 때 생길 수 있는 현상 액션 타입에서 문제가 생길 수 있다. 식별자는 오타가 나서는 안되지만 오타가 날 경우 리듀서가 처리하지 못하게 된다. 해결: 상수를 지정하여 오타를 막을 수 있다. 작은 프로젝트에서는 문제가 되지않지만 큰 프로젝트에 많은 개발자가 들어가는 프로젝트에서는 문제가 될 수 있다. 서로 다른 액션이 많을 때 식별자의 충돌이 발생할 수 있다. 관리하는 데이터의 양이 많을 수록 상태 객체도 점점 커지며 많은 상태를 복사해야한다. 모든 상태를 유지하려면 계속 복사해야하고 리듀서..

[Redux]React-redux 사용하기

Redux? 상태를 전역적으로 관리하기 위해서 사용되는 상태관리 도구이며, Redux 외에도 MobX, React Context, Recoil 등이 있습니다. 상태관리 도구를 사용하여 Props drilling 이슈를 해결할 수 있습니다. Props drilling? 상태가 존재하는 컴포넌트에서 자식 컴포넌트로 이동을 할 때, 수많은 props를 계속해서 내려야하는 경우를 말하며, 코드의 가독성이 나빠지고 유지보수 또한 힘들어집니다. Action 상태에 어떤 Action(행동)을 취할 것인지 정해놓는 객체입니다. Action이 많아질 경우 ActionTypes 파일을 생성하여 타입을 모아두는 경우도 있습니다. Action 타입을 정의할 때는 모두 대문자로 Snake Case로 작성합니다. // 전달 받을..

[Redux] Redux?

Redux? Redux는 전역 상태 관리 라이브러리이다. Redux와 같은 라이브러리로는 Mobx, Recoil, Ovemind.js가 있다. 가장 많이 사용되는 것은 Redux이며, 다음으로 Mobx가 있었는데 Recoil이 등장하면서 점점 사용율이 밀리는 추세이다. Redux를 사용하는 이유 1. 모든 컴포넌트가 props 없이 state를 직접 꺼낼 수 있다. 상위 컴포넌트에서 하위 컴포넌트로 state를 넘겨야 하는 데 하위 컴포넌트가 너무 많을 경우 사용 state를 보관하는 파일을 하나 만들어서 state를 다 보관하여 모든 컴포넌트들이 props 없이 꺼내서 쓸 수 있다. 2. 상태(state) 관리하기 용이하다. 모든 컴포넌트에서 state를 변경하기 시작할 경우 버그가 생기면 모든 컴포넌..