Redux 1편: redux를 사용하는 이유

이은지·2022년 2월 20일
0

전 편에서 props의 한계를 언급하며 글을 마쳤었다.

💙 props의 한계

props의 한계는, 하향식으로밖에 전달이 안된다는 점이다.

C에서 A 컴포넌트의 상태를 가져다 쓰고 싶으면 어떻게 해야할까?
부모 컴포넌트를 거치고 B를 거쳐야지만 가져다 쓸 수 있다.
한 컴포넌트의 상태를 다른 컴포넌트에서 변경하고 싶을 때도 마찬가지다.

이렇게 귀찮을수가!

💙 그래서 redux가 뭔데

저렇게 귀찮은 작업을 하지 않도록 도와주는 게 react-redux라는 라이브러리다.

상태는 컴포넌트에서 관리하는 게 원칙이다.
근데, redux를 사용하면 그 모든 state들을 중앙집중식으로 관리할 수 있다.

이젠 더이상 특정 state를 참조하고 싶을 때 props로 여러 컴포넌트를 거칠 필요가 없다.
그냥 redux store라는 곳에서 한 번에 꺼내 쓸 수 있음. 거기 다 모여 있으니까!

이렇게 되는거징.

💙 그럼 state는 무조건 redux store에 저장해야돼?

그건 아니다.

redux의 장점은? state를 중앙집중관리하고 있기 때문에 여러 컴포넌트들에서 state에 간편하게 접근할 수 있다는 것.
그말은즉슨, 여러 컴포넌트들이 필요로 하는 state가 아니면 굳이 스토어에 저장할 필요가 없다는 것!

한 컴포넌트에서만 쓰이는 state라면 그냥 그 안에서 선언하고 그 안에서 관리하면 된다.
반대로 여러 컴포넌트에서 동시에 참조해야하고, 수정해야 하는 state는 redux store에서 관리하면 된다.

💙 그래서 redux를 사용하는 이유는

  1. props 거칠 필요 없이 여러 컴포넌트에서 한 state에 간편하게 접근할 수 있다.
  2. (중요) state 업데이트가 효율적이다.

사실 2번이 가장 중요한 부분이다!
한 state를 여러 컴포넌트에서 변경하게 되면, 뭔가 문제가 생겼을 때 누가 범인인지 찾기가 어렵다.
근데 redux에서 state를 관리하면 어떨까?

state를 중앙집중식으로 관리한다는 건, 단지 모든 state를 그곳에 저장해둔다 는 뜻이 아니다.
state의 모든 변경도 redux store내에서 관리한다는 뜻이다.
state를 변경하는 모든 작업이 redux store내에서 이뤄지기 때문에, 문제가 생겼을 때 redux store와 관련된 코드만 살펴보면 된다. 이런 이유 때문에 프로젝트 크기가 커지면 꼭 redux를 쓰라고 이야기하는 것!

그래서 redux라는 친구를 어떻게 사용하는건데?
그건 다음 글에서 알아보자~.~

0개의 댓글