닥터마틴, 기억하고 싶은 코드 3 - 페이지네이션(후기 댓글 + 더하기 버튼)

이게 뭐야..?

처음에 시작 조차 어떻게 할지 몰라 구글링하고 질문하고 난리쳤던..힘들었던 기억이 있다.... 사실 지금도 어렵다고 느껴지지만 이 또한 성장통으로 생각하고 긍정적인 마인드셋으로 이해해보자!

Overview

• 페이지가 렌더링 될 때 기본 후기 목록 3개를 받아 옵니다.
• 더보기 버튼 클릭 시 API호출을 할때 엔드포인트의 offset값을 변경하여 다음 3개의 후기를 더 받아오게 됩니다.
• 기존의 state인 comments 배열의 뒤로 붙여넣고 리렌더링 시켜 페이지네이션을 구현합니다.

**DATA 구조**

{
    "result": [
        106,
        {
            "id": 1,
            "userName": "권미정",
            "avatar": "https://raw.githubusercontent.com/kimjy-par/DRHEEWON_img/main/avatar/avatar3.jpeg",
            "ratingStar": "4.0",
            "title": "정말 좋아요 만족합니다.",
            "content": "싸게 잘 산 것 같아요. 그런데 발 뒤꿈치가 날라갔어요. 역시 뒤꿈치브레이커라는 명성에 알맞는 것 같아요 ㅠㅠ"
        },
        {
            "id": 2,
            "userName": "권영미",
            "avatar": "https://raw.githubusercontent.com/kimjy-par/DRHEEWON_img/main/avatar/avatar3.jpeg",
            "ratingStar": "2.0",
            "title": "좋습니다",
            "content": "좋습니다 좋습니다 좋습니다 좋습니다 좋습니다 좋습니다 좋습니다 좋습니다 "
        },
        {
            "id": 3,
            "userName": "송예준",
            "avatar": "https://raw.githubusercontent.com/kimjy-par/DRHEEWON_img/main/avatar/avatar3.jpeg",
            "ratingStar": "3.0",
            "title": "이거좋네요",
            "content": "이거좋네요 이거좋네요 이거좋네요 이거좋네요 이거좋네요 이거좋네요 이거좋네요"
        }
    ]
}

const [remainLength, setRemainLength] = useState();
const [comments, setComments] = useState([]);
-> 버튼 (후기 몇개 남았는지), 코멘트의 개수를 state로 관리한다
  
  useEffect(() => {
    fetch('http://8ec5-211-106-114-186.ngrok.io/review/2/comments?offset=0')
      .then(res => res.json())
      .then(data => {
        setRemainLength(data.result.shift());
        setComments(current => {
          const newList = [...current, ...data.result];
          return newList;
        });
      });
  }, []);
-> fetch 함수로 백엔드와 통신 후, 화면에 처음 보이는 댓글 3개의 상태
-> 버튼에 들어가는 후기의 개수(=106)는 shift로 제거!
-> current는 최근의 값=빈 배열
-> ...data.result 객체 3개가 복붙해서 들어온다.

  const requestMoreBtn = () => {
    fetch(
      `http://8ec5-211-106-114-186.ngrok.io/review/2/comments?offset=${comments.length}`
    )
      .then(res => res.json())
      .then(data => {
        setRemainLength(data.result.shift());
        setComments(current => {
          const newList = [...current, ...data.result];
          return newList;
        });
      });
  };
-> 주소 뒤에 `?offset=${comments.length}` 이 부분 너무 이해가 안되서 오래 고민했다.
-> 쓰는 이유는 requestMoreBtn 함수가 더 많은 후기 버튼 onClick 속성으로 실행되는데, 
  실행될때마다 리뷰이 3개씩 데이터가 들어와야함. 
-> 리뷰를 받아올때 마다 새로 fethc를 하며 서버에 요청을 해야해서 주소 뒤에 작성함.
 
  <section className="UserReview">
    {comments &&
      comments.map((item, idx) => {
        return (
          <ul key={idx} className="UserItems">
            <li className="UserReviewHeader">
              <img
                src="https://raw.githubusercontent.com/kimjy-par/DRHEEWON_img/main/avatar/avatar3.jpeg"
                alt=""
              />
              {item.userName}
            </li>
            <li className="UserReviewBody">
              <div className="UserReviewTitle">{item.title}</div>
              <div className="UserReviewRating">
                {/* {item.ratingStar} */}
                <FontAwesomeIcon icon={faStar} />
                <FontAwesomeIcon icon={faStar} />
                <FontAwesomeIcon icon={faStar} />
                <FontAwesomeIcon icon={faStar} />
                <FontAwesomeIcon icon={faStar} />
                <div className="UserReviewOpen">펼치기</div>
              </div>
            </li>
          </ul>
        );
      })}
  </section>
  <div onClick={requestMoreBtn} className="ReviewMoreBtn">
    더 많은 후기 보기(+{remainLength}개)
  </div>

 const newList = [...current, ...data.result];
 -> 스프레드 메소드를 잘 이해해야함. 이 부분때문에 또 헷갈림
 -> 배열의 객체들이 복사해서 들어온다고 생각하면 된다.