React로 웹페이지만들기 - 서울시 문화행사(5)

일단 저번에 만든 pagination 과 api로 받은 서울시 문화행사 데이터를 연동해서 나열해보기로 했다. 

store로부터 전체 데이터(fullItem)과 현재페이지(currentPage), 한페이지당 item개수(limitItems) 변수를 전달받아서 한 페이지당 6개의 item이 렌더링 될 수 있도록 코드를 작성했다.

currentPage와 연계해서 index를 설정하는데 알고리즘 문제푸는 기분이었다..

// itemBox.js
const ItemBox = () => {
  const { fullItem } = useSelector((state) => state.fullItem);
  const { currentPage, limitItems } = useSelector((state) => state.currentPage);

  const itemArr = fullItem.culturalEventInfo.row;
  // 한 페이지에 6개 item 렌더링
  const currentArr = itemArr.slice(
    (currentPage - 1) * limitItems,
    currentPage * limitItems
  );
  return (
    <ItemBoxContainer>			// styled component 
      {currentArr.map((el, idx) => {
        return (
          <Item
            key={el.TITLE}
            itemImg={el.MAIN_IMG}
            idx={idx + (currentPage - 1) * limitItems}
          />
        );
      })}
    </ItemBoxContainer>
  );
};

export default ItemBox;

 

 

다음으로 item 클릭시 DetailItem 컴포넌트로 이동할 수 있도록 React Router의 Link를 사용한다.

// item.js
const Item = ({ itemImg, idx }) => {
  return (
    <ItemDiv>		// styled component
      <Link to="/DetailItem" state={{ idx }}>
        {<img src={itemImg} alt="img" />}
      </Link>
    </ItemDiv>
  );
};

대표 이미지를 넣어놓고, 클릭하면 Link를 타고 DetailItem으로 이동한다. 이 떄 내가 클릭한 item이 뭔지도 같이 보내줘야 하는데, 그러기 위해서 전에 item이 들어있는 fullItem 상태변수에 들어있는 배열의 index값을 보내주기로 했다. itemBox로부터 내려온 idx를 Link 의 state 속성으로 내려준다. (객체로 내려줘야 하기 때문에 중괄호로 한번 더 감싼다.)

* state 속성으로 내려주는 이유는 React Router의 Link 요소에 props를 내려주기 위한 문법같은 것이다.

 

DetailItems 컴포넌트에서 useLocation hook을 사용하여 Link 태그로부터 내려온 idx를 받아준다. 

그리고 idx에 해당하는 item의 상세 설명을 렌더링 하면 된다.

const DetailItem = () => {
  const { fullItem, loading } = useSelector((state) => state.fullItem);
  const { idx } = useLocation().state;
  if (loading === "succeeded") {
    const itemObj = fullItem.culturalEventInfo.row[idx];
    return (
      <MainDiv>	// styled component
        <div id="main-container">
          <div id="img-container">
            <img src={itemObj.MAIN_IMG} alt="poster" />
          </div>
          <div id="contents-container">
            <div className="contents">분류 : {itemObj.CODENAME}</div>
            <div className="contents">타이틀 : {itemObj.TITLE}</div>
            <div className="contents">행사장소 : {itemObj.PLACE}</div>
            <div className="contents">행사날짜 : {itemObj.DATE}</div>
            <div className="contents">신청일 : {itemObj.RGSTDATE}</div>
            <div className="contents">가격 : {itemObj.USE_FEE}</div>
            <div className="contents">
              <a href={itemObj.ORG_LINK} rel="noopener noreferrer" target="_blank">
                자세히보러가기
              </a>
            </div>
          </div>
        </div>
      </MainDiv>
    );
  } else {
    return <div> 로딩중입니다!</div>;
  }
};

* a 태그에서 새탭에 열기 속성(target='_blank')을 사용할 때 rel="noopener noreferrer" 속성을 추가해줘야 한다. 

관련정보  -->     https://beomsoo.me/issue/Issue-4/

 

 

이제 진짜로 필터링만 하면 될 것 같다....

 

디자인은 어떻게 하지?