다음으로 src 디렉터리에 containers 디렉터리를 만들고, 그 안에 UsersContainer 컴포넌트를 작성하세요.

    src/containers/UsersContainer.js

    import React, { useEffect } from 'react';
    import Users from '../components/Users';
    import { connect } from 'react-redux';
    import { getUsers } from '../modules/users';
    
    const UsersContainer = ({ users, getUsers }) => {
      // 컴포넌트가 마운트되고 나서 호출
      useEffect(() => {
        if (users) return; // users가 이미 유효하다면 요청하지 않음
        getUsers();
      }, [getUsers, users]);
      return <Users users={users} />;
    };
    
    export default connect(
      state => ({
        users: state.users.users
      }),
      {
        getUsers
      }
    )(UsersContainer);

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.