react-redux 알기

전 포스팅에서 redux에 대한 작동방식을 알아보았고, 이번에는 react에서 redux를 사용하는 방법을 알아보자.

npm install redux react-redux
두 가지 패키지를 설치해 준다.

리액트용 리덕스 저장소 만들기

src파일 안에 store 폴더를 만들고 안에 index.js폴더를 만들어 그 안에 리덕스 로직을 넣어준다.

해보자.

import {createStore} from 'redux';

저장소와 리듀서 함수를 만든다.

const counterReducer = (state = {counter: 0}, action)  => {
	if(action.type === "increment"){
    	counter = state.counter + 1
    }

    if(action.type === "decrement"){

    }
	return{
    	counter = state.counter - 1
    }

    return state;
}
const store = createStore(counterReducer);

export default store;

자바스크립트와 다른 점은 여기서 바로 구독과 액션을 하지 않고 리액트 앱과 연결 후 컴포넌트에서 디스패치 한다는 점이다.
이를 위해 스토어를 export한다.

이제 우리는 리덕스 저장소를 리액트 앱에 제공해야 하는데 여기서 제공한다는게 뭘까?

리액트 앱에 저장소를 제공

우리가 root컴포넌트를 렌더링한 index.js에서 react-redux에서 가져온 Provider컴포넌트를 import할 수 있다.
그리고 App컴포넌트를 Provider컴포넌트로 감싸준다.

다른 컴포넌트에서도 Provider를 중첩해 사용할 수 있지만 보통은 앱 전체에서 상태를 관리하기 때문에 최고수준에서 저장소를 제공해주는 것이 좋다.

그리고 같은 곳에 store도 import 해주고 Provider에 store value로 prop해준다.

import { Provider } from 'react-redux';
import store from './store/index';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Provider store={store}><App /></Provider>);

이제 이 하위에 컴포넌트들어서 저장소에 도달하여 데이터를 구독하거나 액션을 발송할 수 있다.

저장소 활용하기 - 구독하기

사용할 컴포넌트에 저장소가 관리하는 상태 부분을 자동으로 선택할 수 있는 커스텀훅 useSelector를 react-redux에서 임포트해 준다.

그리고 함수형 컴포넌트 안에 useSelector();을 넣고 이 안에 우리가 실행할 함수를 넣어주어야 한다.
이 함수가 리덕스가 관리하는 상태를 받게 된다.
이를 상수에 저장해서 원하는 곳에 넣어주면 된다.

import { useSelector } from 'react-redux';

const Counter = () => {
	const counter = useSelector(state => state.counter); // useSelector의 리턴값을 counter에 넣어 필요한 곳에 활용한다.
    
    return {counter}
}

export default Counter;

자동으로 구독을 신청해 데이터가 바뀌면 자동으로 Counter컴포넌트가 재실행 되어 항상 최신 카운터를 가지게 된다.

저장소 활용하기 - 액션 발송하기

액션을 보내줄 버튼을 만들어주고, useDispatch훅을 import하여 호출해준다.
여기에는 어떤 argument도 전달하지 않는다.
대신 실행할 수 있는 dispatch 함수를 반환한다.
이 함수는 Redux store에 대한 action을 보낸다.

그리고 버튼에 onClick으로 연결된 함수 안에 disPatch 함수안쪽에 액션을 넣어주면 된다.

import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
	const dispatch = useDispatch();
    
    const incrementHandle = () => {
		dispatch({type : "increment"});
	}
       
    const decrementHandle = () => {
		dispatch({type : "decrement"});
	}
    
    return (
    	<>
        	<button onClick={incrementHandle}>increment</button>
        	<button onClick={decrementHandle}>decrement</button>
        </>
    )
}

export default Counter

집중이 필요했지만 생각보다 구조가 단순해서 이해하기 어렵지 않았다.
다음에는 리덕스 고급 및 리덕스 툴킷 공부해야지.
오늘 너무 띵가띵가 놀아서 다 못끝냈다. 아쉽지만 내일 더 잘하자.