이 글은 공식문서와 강의 등을 참고해서 작성하였으며
본인이 이해하고 나중에 봤을 때 복기가 빠를 수 있게 작성자 입맛대로 작성하였습니다.
리덕스(Redux)는 오픈 소스 자바스크립트 라이브러리의 일종으로, state를 이용해 웹 사이트 혹은 애플리케이션의 상태 관리를 해줄 목적으로 사용합니다.
페이지를 작성하다보면 컴포넌트들을 작성하게 되는데 컴포넌트 안에 컴포넌트 안에 컴포넌트 구석 안쪽까지 props를 전달하려면 무진장 하드하고 귀찮기 때문에 이를 해결하기 위해 쓰인다고 합니다. Context 같은! (물론 이 방법도 세팅하기가 이후에 나온 것들보단 복잡하지만..)
또한 reducer,dispatch를 활용하여 상태관리가 용이합니다. 그 부분만 잘 체크하면 됩니다. 엄청 큰 대규모 사이트의 데이터를 한 곳에서 체크하고 관리할 수 있기 때문에 사용합니다.
세팅이 조금 더럽긴 하지만 해놓으면 redux에 있는 state들을 자유롭게 사용할 수 있습니다.
자 그럼 바로 시작해보겠습니다.
기본 프로젝트 생성해주세요. 크게 바꿔서 진행하진 않을 예정입니다.
npx install create-react app.
사실 이렇게 작은 페이지에서는 redux를 쓰면 바람직하진 않습니다. (오히려 코드가 길어짐)
npm install redux react-redux
위처럼 두 개의 라이브러리를 받아주세요
(이후에 dispatch로 값도 수정해보겠습니다.)
가볍게 이 기본 프로젝트에 아래 글들만 지우고 숫자를 띄워보겠습니다.
Redux createStore를 import 해온 뒤에 콜백함수를 사용하여 store를 생성하면 됩니다. 안에는 원하는 데이터의 초기값들을 작성하셔야 합니다. ex) {day: 31, name : kim} 등등
저는 우선 좋아하는 숫자 7을 띄울 수 있게 7을 넣겠습니다.
(index.js)
import ~~~
import {createStore} from 'redux';
let store = createStore(()=> { return 7 })
ReactDOM.render(
~~
~~
React Redux Provider 를 Import 해온 뒤에 에 감싸주고 store를 전송해주면 됩니다.
이렇게 되면 하위 컴포넌트들이 props전송할 필요 없이 state를 사용할 수 있습니다.
(index.js)
import {createStore} from 'redux';
import {Provider} from 'react-redux';
// 이렇게 import 해오기
let store = createStore(()=> { return 7 })
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
태그에 값을 넣어서 확인을 해봅니다.
저는 바로 보여주기 위해 App.js에서 작성하겠습니다.
(App.js)
import {connect} from 'react-redux';
// 1번
function App(props) {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>{props.count}</p>
</header>
</div>
);
}
// 2번
function props만들기(state) {
return {
count : state
}
}
// 3번
export default connect(props만들기)(App);
아래처럼 결과가 잘 나오는 것을 보실 수 있습니다!
다음번엔 dispatch와 reducer로 데이터 고치는 방법을 작성하겠습니다.