리덕스와 리덕스툴킷

piper ·2024년 2월 29일
0

React

목록 보기
15/22

리덕스:
Redux 는 상태관리를 하기 위해서 사용하는데요.간단하게 React에서 Redux를 사용하는 이유 중 하나는 성능 최적화입니다. (공식문서기준)React 는 상태가 바뀔때마다 컴포넌트가 업데이트됩니다.그말은 즉 상태가 바뀔때마다 재렌더링 된다는거죠."재렌더링..? 어떻게 재 렌더링 된다는거죠?"리액트는 단방향 데이터 흐름 이기 때문에 부모컴포넌트는 자식 컴포넌트에게 props를 보내고 자식 컴포넌트는 부모컴포넌트의 props를 받습니다.그럼 부모 컴포넌트의 상태값이 변하면 자식 컴포넌트도 렌더링이 되겠죠? 부모 컴포넌트가 상태값이 변할때마다 자식컴포넌트도 같이 재렌더링되요. 그래! 자식이 하나 있으면 뭐 괜찮아요 하지만 자식컴포넌트가 여러개라면??
출처: https://chaeyoung2.tistory.com/59 [공부하는 공작새:티스토리]

부모에서 막내 컴포넌트까지 props를 계속 전달하는것도 까다롭고 만약에 부모 컴포넌트가 전달해준 상태값이 변히게 되면 모든 컴포넌트들이 렌더링 될겁니다. 그렇게 되면 불필요한 렌더링이 일어나고 굉장히 성능적으로도 별로겠죠.또 props를 부모에서 막내컴포넌트까지 여러 컴포넌트를 거쳐 전달하게 되면 유지보수 측면으로 상태관리하기가 힘들어집니다. 이래서 Redux를 사용하게 됩니다.Redux를 사용하게되면 Store에서 상태를 관리하고 업데이트 해줍니다.스토어는 컴포넌트 밖에서 관리를 해주니까요! 컴포넌트를 타고타고 가서 상태를 관리해주는 일은 없겠죠!
출처: https://chaeyoung2.tistory.com/59 [공부하는 공작새:티스토리]

리덕스툴킷:
초기 설정이 간편해졌습니다. 기존 redux는 리덕스 스토어를 구성하는 것은 너무 복잡하였지만, 툴킷에서는 좀 더 간편화되었습니다.
더이상 다양한 패키지들를 설치 하지 않아도 됩니다. 리덕스를 사용하면 redux devtool, immer, thunk 등 여러가지 라이브러리를 추가적으로 설치해야 하지만, redux-toolkit 내부에 이미 설치가 되어 있기에 굳이 설치 할 필요가 없습니다.
반복되는 코드가 너무 많아 코드가 복잡해지고 실수를 많이 유발했지만 이러한 부분이 많이 개선되었습니다.
툴킷에서는 더이상 불변성을 신경쓰지 않아도 됩니다.

profile
연습일지

0개의 댓글