제목: mapStateToProps를 사용하여 함수형 컴포넌트와 Redux 상태 연결하기
소개
Redux와 React를 사용하여 작업할 때, Redux가 유지하는 애플리케이션 상태와 React 컴포넌트간의 연결을 설정하는 것은 필수적입니다. 클래스 컴포넌트에서는 보통 mapStateToProps 함수를 사용하여 필요한 상태를 props로 전달합니다. 하지만 함수형 컴포넌트에서는 어떻게 해야 할까요?
함수형 컴포넌트에서 mapStateToProps 사용하기
흔한 오해와는 달리, React에서 함수형 컴포넌트와 함께 mapStateToProps를 사용할 수 있습니다. 이를 달성하는 방법을 알아보기 위해 몇 가지 예제를 살펴볼까요.
예제 1: react-redux에서 connect 사용하기
import React from 'react';
import { connect } from 'react-redux';
const MyComponent = ({ propOne }) => {
return
{propOne}
;
};
const mapStateToProps = (state) => {
return { propOne: state.propOne };
};
export default connect(mapStateToProps)(MyComponent);
예제 2: useSelector와 useDispatch 훅 사용하기
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
const AccountDetails = () => {
const accountDetails = useSelector(state => state.accountDetails);
const dispatch = useDispatch();
return (
<div>
<h2>사용자 이름: {accountDetails.username}</h2>
<button onclick={() => dispatch(logout())}>로그아웃</button>
</div>
);
};
export default AccountDetails;
예제 1에서는 react-redux 패키지의 connect 함수를 사용하여 함수형 컴포넌트 MyComponent를 Redux 상태와 연결합니다. mapStateToProps 함수를 지정함으로써 필요한 상태 속성을 선택하고 컴포넌트에 props로 전달할 수 있습니다.
예제 2는 React Redux 훅을 사용한 대체 방법을 보여줍니다. useSelector 훅을 사용하면 Redux 스토어에서 값을 소비할 수 있고, useDispatch 훅은 액션을 디스패치하는 것을 간편하게 할 수 있습니다.
mapStateToProps 사용의 이점
mapStateToProps나 훅을 이용하여 함수형 컴포넌트를 Redux 상태와 연결하면 다음과 같은 여러 가지 이점을 얻을 수 있습니다:
- 무결한 통합: 동일한 접근 방식을 함수형 컴포넌트와 클래스 컴포넌트 모두에서 사용할 수 있으며, 애플리케이션 전체에서 일관성을 유지합니다.
- 모듈화와 재사용성: 컴포넌트를 Redux 스토어에 연결함으로써, 컴포넌트를 모듈화하고 상태의 다른 부분과 쉽게 재사용할 수 있습니다.
- 효율적인 렌더링: 특정 상태 속성을 props로 전달할 때, 연결된 컴포넌트는 해당 상태 속성이 변경될 때만 다시 렌더링되므로 성능을 최적화할 수 있습니다.
결론적으로, mapStateToProps나 useSelector 같은 React Redux 훅을 사용하여 React 애플리케이션에서 함수형 컴포넌트를 Redux 상태에 손쉽게 연결할 수 있습니다. 선호하는 방식과 프로젝트 요구사항에 맞게 접근 방식을 선택하면 됩니다.
함수형 컴포넌트와 Redux를 함께 사용하는 더 많은 자세한 내용과 예제는 공식 React Redux 문서를 참조하세요: https://react-redux.js.org/next/api/hooks#useselector.
