Redux란 무엇인가?
React 애플리케이션에서 Redux를 작동시키려면 컴포넌트 계층의 최상위에 Provider 컴포넌트를 추가해야 한다.
Provider 컴포넌트는 react-redux 패키지의 일부로 스토어의 데이터를 컴포넌트로 주입해준다.
Provider 컴포넌트를 사용하면 모든 자식 컴포넌트가 스토어에 접근할 수 있다.
Provider 컴포넌트를 사용하려면 store 속성으로 스토어를 전달해야 한다.
스토어는 애플리케이션 상태를 표현하는 객체다.
JSX 포맷을 이용해서 Provider 컴포넌트를 정의하고 리듀서를 전달받은 스토어 인스턴스를 넘겨준다.
react-router를 사용하면 브라우저의 경로에 따라 컴포넌트 계층을 정의할 수 있다.
React Router의 핵심은 모든 경로를 여러 개의 중첩된 Route 컴포넌트로 선언할 수 있다는 것이다.
Redux에서 리듀서는 액션이 스토어에 전달될 때 실행되는 함수다.
첫 번째 인자인 state는 전체 상태에서 해당 리듀서가 관리하는 일부분에 대한 참조다.
두 번째 인자인 action은 스토어로 전달된 액션을 표현하는 객체다.
리듀서의 입력은 이전에 발생한 액션의 결과인 현재 상태(state)와 현재 발생한 액션(action)이다.
스토어의 데이터를 변경할 때는 액션을 사용한다.
애플리케이션 상태를 변경하고 싶을 때마다 해당하는 액션을 스토어에 전달해야 한다.
- 컴포넌트에서 type 속성과 필요한 데이터를 담은 액션 객체를 dispatch()에 전달하여 실행한다.
- 리듀서 모듈에서 관련되어 있는 리듀서를 실행한다.
- 스토어가 새로운 상태로 갱신되고 컴포넌트에서 새로운 상태를 전달 받는다.
Redux를 사용하면 스토어의 일부를 갱신할 때, 해당 부분에 의존하는 컴포넌트는 새로운 속성을 전달받아 다시 렌더링된다.
Redux는 애플리케이션의 전체 데이터를 한 곳에 저장할 수 있는 기능을 제공한다.
react-redux 라이브러리를 사용하면 connect() 메소드를 사용해서 어느 컴포넌트라도 스토어에 연결하여 스토어의 변경을 반영하도록 할 수 있다.
요약
단방향 데이터 흐름은 React 앱에 예측가능성과 유지보수의 편의를 제공한다.
Flux는 React와 단방향 데이터 흐름을 다룰 때 권장되는 아키텍처다.
Redux를 사용하면 액션을 스토어에 전달하거나 속성 객체에 추가할 수 있다.
Redux의 connect() 메소드는 스토어의 데이터에 접근할 수 있게 해주고 액션을 스토어에 전달할 수 있으며, 이는 컨테이너 컴포넌트에 필요한 기능이다.
Redux의 Provider 컴포넌트가 자식 컴포넌트에서 스토어에 접근할 수 있게 해주므로 수동으로 스토어 속성을 전달하지 않아도 된다.
실전
React 애플리케이션에서 Redux를 작동시키려면 컴포넌트 계층의 최상위에 Provider 컴포넌트를 추가해야 한다.
Provider 컴포넌트는 react-redux 패키지의 일부로 스토어의 데이터를 컴포넌트로 주입해준다.
즉, Provider 컴포넌트를 사용하면 모든 자식 컴포넌트가 스토어에 접근할 수 있다.
Provider 컴포넌트를 사용하려면 store 속성으로 스토어를 전달해야 한다.
스토어는 애플리케이션 상태를 표현하는 객체다.
Provider 컴포넌트와 하위 트리의 컴포넌트를 렌더링할 때는 react-dom의 render() 메소드를 사용한다.
index.js 파일은 JSX 포맷을 이용해서 Provider 컴포넌트를 정의하고 리듀서를 전달받은 스토어 인스턴스를 넘겨준다.
라우팅
react-router를 사용하면 브라우저의 경로에 따라 컴포넌트 계층을 정의할 수 있다.
React Router의 핵심은 모든 경로를 여러 개의 중첩된 Route 컴포넌트로 선언할 수 있다는 것이다.
각 Route 컴포넌트는 두 가지 속성을 전달받는다.
path: URL 경로 또는 위치로 URL 매개변수를 포함할 수 있다.
component: 사용자가 해당 경로 또는 위치로 접근했을 때 렌더링할 컴포넌트에 대한 참조다. Provider 컴포넌트를 포함한 모든 부모 컴포넌트가 렌더링된다.
리듀서
Redux에서 리듀서는 액션이 스토어에 전달될 때마다 실행되는 함수다.
첫 번째 인자인 state는 전체 상태에서 해당 리듀서가 관리하는 일부분에 대한 참조다.
두 번째 인자인 action은 스토어로 전달된 액션을 표현하는 객체다.
즉, 리듀서의 입력은 이전에 발생한 액션의 결과인 현재 상태(state)와 현재 발생한 액션(action)이다.
redux-actions의 handleActions는 키는 액션, 값은 함수인 맵 같은 형태의 객체를 받아 액션 종류에 따라 하나의 함수만 호출된다.
액션
스토어의 데이터를 변경할 때는 액션을 사용한다.
모든 액션은 최소한 하나의 속성인 type을 가진 순순한 객체다.
애플리케이션 상태를 변경하고 싶을 때마다 해당하는 액션을 스토어에 전달해야 한다.
-
컴포넌트에서 type 속성과 필요한 데이터를 담은 액션 객체를 dispatch()에 전달하여 실행한다.
-
리듀서 모듈에서 관련되어 있는 리듀서를 실행한다.
-
스토어가 새로운 상태로 갱신되고 컴포넌트에서 새로운 상태를 전달받는다.
액션 생성자
스토어를 변경하려면 모든 리듀서에 액션을 전달해야 한다.
리듀서는 액션의 type에 따라 애플리케이션 상태를 변경한다.
액션 생성자를 이용해서 액션의 type을 감출 수 있다.
-
필요한 데이터와 함께 액션 생성자를 실행한다. 액션 생성자는 리듀서 모듈에서 정의할 수 있다.
-
컴포넌트에서 스토어로 액션을 전달한다. 액션의 type을 몰라도 실행할 수 있다.
-
리듀서 모듈에서 관련된 리듀서를 실행한다.
-
스토어가 새로운 상태로 갱신된다.
간단히 말해서 액션 생성자는 액션을 반환하는 함수다.
스토어
데이터에 접근하려면 명시적으로 컴포넌트를 스토어에 연결해야 한다.
Provider 컴포넌트의 역할은 모든 컴포넌트에 자동으로 스토어를 제공해서 일부 컴포넌트에서 스토어에 연결하거나 구독하게 하기 위함이다.
컴포넌트를 스토어에 연결하려면 connect() 메소드를 사용한다.
