KBennyCC

React.js 01.13. React Redux 리액트로 프로젝트에서는 최상위 컴포넌트에서 상태 관리 로직이 너무 많아져 코드가 길어지고 가독성이 떨어진다.  불필요한 리렌더링을 방지하기 위해서 하위 컴포넌트에서 shouldComponentUpdate를 구현하여 방지한다 하더라도 프로젝트가 복잡해질 경우 여러 컴포넌트를 거쳐 porps를 전달하는 것은 비효율적이다.  작업을 진행하면서 헷갈릴 수 있고, 실제로 컴포넌트 자기 자신은 필요하지 않은데 하위 컴포넌트 때문에 필요한 props 개수가 많아지기 때문이다. 추가로 형제 컴포넌트에서 불필요한 렌더링이 일어나기 때문에 이 역시 상황에 따라 방지를 해주어야한다. 이러한 문제점들은 리덕스라는 상태 관리 도구를 사용하면 매끄럽게 해결할 수 있다. 01.13.1. Redux 개념 상태를 더 효율적으로 관리하는데 사용하는 상태 관리 라이브러리이다. 리덕스는 상태 관리의 로직을 컴포넌트 밖에서 처리하는 것이다. 리덕스를 사용하면 스토어(store)라는 객체 내부에 상태를 담게 된다. 리덕스 적용 구조 리덕스를 사용하면 스토어에서 모든 상태 관리가 일어난다. 상태에 어떤 변화를 일으켜야 할 때는 액션(action)을 스토어에 전달한다.  액션은 객체 형태로 되어 있으며, 상태를 변화시킬 때 이 객체를 참조하여 변화를 일으킨다. 액션을 전달하는 과정을 디스패치(dispatch)라고 한다. 스토어가 액션을 받으면 리듀서(reducer)가 전달받은 액션을 기반으로 상태를 어떻게 변경시켜야할지 정한다. 액션을 처리하면 새 상태를 스토어에 저장한다. 스토어 안에 있는 상태가 바뀌면 스토어를 구독하고 있는 컴포넌트에 바로 전달한다. 부모 컴포넌트로 props를 전달하는 작업은 생략하며, 리덕스에 연결하는 함수를 사용하여 컴포넌트를 스토어에 구독시킨다. 스토어 : 애플리케이션의 상태 값들을 내장하고 있다. 액션 : 상태 변화를 일으킬 때 참조