노드&리액트 공부기록(12) - Redux란, 리액트에 리덕스가 필요한 이유, Props, State

🔍리덕스(Redux)란? state 상태 관리 library

• 리덕스는 자바스크립트 app을 위한 예측 가능한 (predictable) state container 이다.
• 리액트뿐만 아니라 Angular, jQuery, vanila JavaScript 등 다양한 framework와 작동되게 설계되었다.
• 즉, 리액트만을 위한 Library는 아니다.

🔍리액트에 리덕스가 필요한 이유?

• 리액트로 프로젝트 진행 시 Component 는 local state를 가지게 되고, 어플리케이션은 global state를 가지게 된다.

✅local state : 각각의 Component가 가지는 state.
✅global state : 어플리케이션 전체에서 global state는 유지, 즉 local state는 global state를 공유하게 되는 것. ex)유저의 로그인 유무에 따라 어플리케이션의 state가 달라보이는 것.

• 리액트로만 프로젝트 진행 시 우리의 어플리케이션은 local, global 각각의 state를 관리하기 어렵고 프로젝트 규모가 점점 커지고 Component의 수가 늘어나면 필요없는 data의 흐름이 생기게 된다.
• 리덕스를 사용하게 되면 하나의 store를 통해 global state를 포함한 모든 state를 저장, 유지할 수 있고 원하는 Component로만 data를 전달할 수 있어 이러한 문제를 해결할 수 있다.

=>예를 들어 댓글을 관리하는 component 중 하위 component에서 변경이 일어나면 그 변경된 값이 상위 component를 타고 올라가야 한다. 그러나 redux 사용 시 외부의 store를 통해 변경된 지점에서 직접 정보를 주고받을 수 있다!!

 

🔍Props vs State

• Pops(Poperties)는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 말한다.
• 부모 컴포넌트로부터 받는 데이터이므로 자식 컴포넌트에서는 변경할 수 없다.
• State는 한 컴포넌트 안에서 유동적인 데이터를 다룰 때 사용되며, 컴포넌트 안에서 데이터를 변경할 수 있다.