📁 Container-Presentational

데이터 처리와 출력을 분리하여 코드를 작성

❓ Why?

코드의 가독성 증가 & 재사용성 향상

📤 Container

어떻게 동작하는지, 어떤 로직을 수행하는지에 관련있다.

비즈니스 로직, 상태 등을 모아 놓는다.

📥 Presentational

Container에서 처리한 상태를 props로 전달받아 상태를 화면에 출력하는 컴포넌트.

📋 Example

📤 container

import React, { useState, useEffect } from 'react';
import ClubList from './ClubList';
import { getDatas, searchDatas } from 'apis/clublist';
import getToken from 'utils/getToken';
	
const ClubListContainer = () => {
  const [clubData, setClubData] = useState([]);
  const [originData, setOriginData] = useState([]);

  const filterCategory= (element) => {
    const searchData = originData.filter((el) => el.category === element);

    if (element === '전체') setClubData(originData);
    else setClubData(searchData);
  };

  const searchCategory = async (data) => {
    await searchDatas(data).then((response) => {
      if (response.data.clubs.length === 0) {
        alert('검색결과가 없습니다');
        return;
      }
      setClubData(response.data.clubs);
    });
  };

  const getData = async () => {
    try {
      const response = await getDatas();
      setClubData(response.data.result);
      setOriginData(response.data.result);
    } catch (e) {
      alert(e);
    }
  };

  const moveToClubHome= () => {
    if (!getToken()) alert('로그인 후 이용해주세요.');
    else router.push(`/clubhome/${clubNo}`);
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <ClubList
      clubData={clubData}
      originData={originData}
      filterCategory={filterCategory}
      searchCategory={searchCategory}
			moveToClubHome={moveToClubHome}
    />
  );
};

export default ClubListContainer;

📥 Presentational

import React from 'react';
import TypeSearch from './TypeSearch';
import styles from 'styles/Club/Lists/ClubLists.module.scss';
import ClubListItem from './ClubList';

const ClubList = ({ clubData, filterCategory, searchCategory, moveToClubHome}) => {
  return (
    <>
      <TypeSearch filterCategory={filterCategory} searchCategory={searchCategory} />
      <div className={styles.container}>
        <div className={styles.activities}>
          {clubData.map((club) => {
            return (
              <ClubListItem
                img={club.logoUrl}
                title={club.name}
                categories={club.category}
                key={club.no}
                clubNo={club.no}
                clubName={club.name}
								onClick={moveToClubHome}
              />
            );
          })}
        </div>
      </div>
    </>
  );
};

export default ClubList;