react-redux (2022년 개정판)

리액트와 리덕스의 기본 이해

리액트는 컴포넌트 기반의 라이브러리로, 화면을 구성하는 다양한 UI 요소를 쉽게 만들 수 있게 도와줘요. 쉽게 말하면, 리액트는 웹 페이지의 시각적인 부분을 담당하는 도구랍니다. 반면에 리덕스는 애플리케이션의 상태를 중앙에서 관리해주는 역할을 해요. 상태란 사용자가 애플리케이션을 사용할 때 발생하는 데이터나 정보들을 의미해요.

예를 들어, 여러분이 만든 쇼핑몰 웹사이트에서 장바구니에 담긴 상품 목록이나 사용자의 로그인 상태 같은 정보가 바로 상태라고 할 수 있어요. 리액트만 사용할 경우, 이 상태를 각 컴포넌트가 개별적으로 관리해야 해서 복잡해질 수 있어요. 그래서 리덕스를 사용하면 상태를 중앙에서 관리하고, 필요할 때 쉽게 접근할 수 있도록 도와주는 거죠.

리덕스의 핵심 개념은 '스토어', '액션', '리듀서'예요. 스토어는 애플리케이션의 모든 상태를 저장하는 장소고, 액션은 상태를 변경하기 위한 요청을 의미해요. 마지막으로 리듀서는 현재 상태와 액션을 받아 새로운 상태를 만들어내는 역할을 해요. 이 세 가지가 잘 맞물려 돌아가야 리덕스가 효과적으로 작동해요.

리덕스의 설치 및 설정 방법

리덕스를 사용하려면 먼저 설치가 필요해요. 설치는 npm이라는 패키지 관리 도구를 사용해 할 수 있어요. 터미널에서 다음 명령어를 입력하면 리덕스와 리액트 리덕스를 동시에 설치할 수 있어요.

npm install redux react-redux

설치가 완료되면, 이제 애플리케이션에서 리덕스를 사용할 준비가 된 거예요. 리덕스의 첫 단계는 스토어를 만드는 거예요. 스토어를 만들기 위해서는 createStore라는 함수를 사용해요. 이때, 리듀서를 함께 전달해야 해요. 리듀서란 상태를 어떻게 변화시킬지를 결정하는 함수니까요.

예를 들어, 아래처럼 간단한 리듀서를 만들어 볼 수 있어요:

```javascript const initialState = { number: 1 };

const reducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { number: state.number + 1 }; default: return state; } };

const store = createStore(reducer); ```

이렇게 스토어가 만들어지면, 이제 리액트 애플리케이션에서 이 스토어를 사용할 수 있게 해줘야 해요. 이를 위해 Provider 컴포넌트를 사용해 스토어를 애플리케이션의 최상단에 감싸주면 됩니다.

리액트와 리덕스 연동하기

리액트와 리덕스를 연동하는 가장 중요한 과정은 상태를 컴포넌트에 연결하는 거예요. 이를 위해 useSelector와 useDispatch 훅을 사용해요. useSelector는 스토어의 상태를 읽어오는 데 사용되고, useDispatch는 액션을 발생시키는 데 사용돼요.

예를 들어, 아래와 같이 버튼 클릭 시 숫자를 증가시키는 컴포넌트를 만들어볼 수 있어요:

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

const Counter = () => { const number = useSelector(state => state.number); const dispatch = useDispatch();

return (
    <div>
        <h1>{number}</h1>
        <button => dispatch({ type: 'INCREMENT' })}>
            Increment
        </button>
    </div>
);

}; ```

이 코드는 현재 상태에서 number 값을 가져오고, 버튼 클릭 시 INCREMENT 액션을 발생시켜 상태를 업데이트해요. 이렇게 하면 리덕스가 상태 관리를 도와주기 때문에 각 컴포넌트 간의 연결이 훨씬 간편해져요.

이제 여러분은 리액트와 리덕스를 연동하는 방법을 배웠으니, 실전에서 이 조합을 활용해보세요! 다양한 프로젝트에 적용해보면 리덕스가 얼마나 유용한 도구인지 느낄 수 있을 거예요.